Une Introduction à CSS Format de Grille: La moitié 2

Par | Octobre 18, 2017

C'est la deuxième publication d'un article en deux parties pour obtenir a commencé avec Grille CSS Format. Si vous êtes saisissant l'attention dans l'étude supplémentaire sur Grille CSS et le modèle de la nouvelle Grille CSS Format de fonction dans Firefox DevTools, aller à la Firefox DevTools aire de Jeux.

Understanding grid lines

If youve learn Part 1, it’s finest to now be comfy making a grid and defining the row and column sizes. We are in a position to now transfer on to inserting gadgets on a grid. There are a quantity of methods to position gadgets, however we are going to begin with a primary instance. Take into account a grid with six items:

Each merchandise inside this grid will seemingly be positioned routinely within the default order.

If we want to have better management, we are in a position to place gadgets on the grid utilizing grid line numbers. Grid strains are numbered left to proper and high to backside (if you would possibly be working in a right-to-left language, then grid strains are numbered proper to left). The above instance can be numbered like so:

Position an item

Here is the HTML we will seemingly be utilizing for this example:

<div class=container”> <div class=item item1″>1</div> <div class=item item2″>2</div> <div class=item item3″>3</div> <div class=item item4″>4</div> <div class=item item5″>5</div> <div class=item item6″>6</div></div>

Say we wish to place our first grid merchandise (with a category of item1) to be within the second row and occupy the second column. This merchandise might need to begin on the second row line, and span to the third row line. It goes to additionally need to begin out on the second column line and span to the third column line. We may write our CSS like so:

.item1 { grid-row-start: 2; grid-row-end: trois; grid-column-start: 2; grid-column-end: 3;}Shorthand property

We can even rewrite this with shorthand properties:

.item1 { grid-row: 2 / trois; grid-column: 2 / 3;}

Here is the result:

See the Pen CSS Grid Format Place Items by Mozilla Builders (@mozilladevelopers) on CodePen.

Creating a Primary Layout

Now that we’ve got a primary understanding of easy strategies to place gadgets, we are in a position to create a primary format. Lets create the identical format utilizing three totally different methods.

Method 1: Place Items

For our first format methodology, we wont be introducing any new ideas. Effectively merely be utilizing the grid-row and grid-column shorthand properties to manually place gadgets akin to a header, footer, et ainsi de suite.

Here is the HTML:

<div class=container”> <div class=header”>header</div> <div class=sidebar”>sidebar</div> <div class=content-1″>Content-1</div> <div class=content-2″>Content-2</div> <div class=content-3″>Content-3</div> <div class=footer”>footer</div></div>

Here is the CSS:

.container { montrer: grid; width: 750px; top: 600px; grid-template-columns: 200px 1fr 1fr; grid-template-rows: 80px 1fr 1fr 100px; grid-gap: 1rem;} .header { grid-row: 1 / 2; grid-column: 1 / 4;} .sidebar { grid-row: 2 / quatre; grid-column: 1 / 2;} .content-1 { grid-row: 2 / trois; grid-column: 2 / 4;} .content-2 { grid-row: trois / quatre; grid-column: 2 / 3;} .content-3 { grid-row: trois / quatre; grid-column: trois / 4;} .footer { grid-row: quatre / 5; grid-column: 1 / 4;}

Here is the result:

See the Pen CSS Grid Format Primary Layout by Mozilla Builders (@mozilladevelopers) on CodePen.

Quick tip: If you’re utilizing Firefox Quantum, you’ll have the opportunity to check out the show line numbers setting on the Firefox CSS Grid Format Panel. Examine the end result above and choose the format panel. Right here you’ll have the opportunity to activate the overlay grid and examine the field to show line numbers. Helpful proper? This device makes it very easy to visualise your grid when positioning gadgets. Youll need to make use of Firefox Quantum to entry this function. Dont have Quantum but? Obtain Firefox Quantum Developer Version here.

Method 2: Named Lines

Another methodology for positioning gadgets is to make use of named grid areas with the grid-template-areas and grid-area properties. One of the only ways to clarify that is with an instance. Lets recreate the grid from our earlier instance with the grid-template-areas property:

.container { montrer: grid; width: 100 pour cent; top: 600px; grid-template-columns: 200px 1fr 1fr; grid-template-rows: 80px 1fr 1fr 100px; grid-gap: 1rem; grid-template-areas: “header header header” “sidebar content-1 content-1” “sidebar content-2 content-3” “footer footer footer”;}

Here we’ve got outlined three columns and 4 rows. As a substitute of inserting every particular person merchandise, we are in a position to outline the whole format utilizing the grid-template-areas property. We are in a position to then assign these areas to every grid merchandise utilizing the grid-area property.

Our HTML:

<div class=container”> <div class=header”>header</div> <div class=sidebar”>sidebar</div> <div class=content-1″>Content-1</div> <div class=content-2″>Content-2</div> <div class=content-3″>Content-3</div> <div class=footer”>footer</div></div>

The remainder of our CSS:

.header { grid-area: header;} .sidebar { grid-area: sidebar;} .content-1 { grid-area: content-1;} .content-2 { grid-area: content-2;} .content-3 { grid-area: content-3;} .footer { grid-area: footer;}

Here is the result:

See the Pen CSS Grid Format Template Areas by Mozilla Builders (@mozilladevelopers) on CodePen.

Quick Tip: Do you know that FireFox DevTools can show the realm names? Strive it out! Examine the grid above and open the format panel. From right here you’ll have the opportunity to toggle the overlay grid and the Show Space Names function. Youll need Firefox Quantum to have entry to this function. Youll need to make use of Firefox Quantum to entry this function. Dont have Quantum but? Obtain Firefox Quantum Developer Version here.

Method three: Named Lines

We have positioned an merchandise on the grid by offering the grid-column and grid-row properties with particular grid strains. We are in a position to additionally identify some or all of these grid strains when defining a grid. This enables us to make use of these names as a substitute of grid lines.

To identify a grid line, we merely present the identify in sq. brackets:

.container { montrer: grid; width: 100 pour cent; top: 600px; grid-gap: 1rem; grid-template-columns: [main-start sidebar-start] 200px [sidebar-end content-start] 1fr [column3-start] 1fr [content-end main-end]; grid-template-rows: [row1-start] 80px [row2-start] 1fr [row3-start] 1fr [row4-start] 100px [row4-end];}

Now that we’ve got line names, we are in a position to use these names when inserting gadgets. Lets recreate our primary format utilizing named strains, as a substitute of line numbers:

.header { grid-column: main-start / main-end; grid-row: row1-start / row2-start;} .sidebar { grid-column: sidebar-start / sidebar-end; grid-row: row2-start / row4-start;} .content-1 { grid-column: content-start / content-end; grid-row: row2-start / row3-start;} .content-2 { grid-column: content-start / column3-start; grid-row: row3-start / row4-start;} .content-3 { grid-column: column3-start / content-end; grid-row: row3-start / row4-start;} .footer { grid-column: main-start / main-end; grid-row: row4-start / row4-end;}

Here is our HTML:

<div class=container”> <div class=header”>header</div> <div class=sidebar”>sidebar</div> <div class=content-1″>Content-1</div> <div class=content-2″>Content-2</div> <div class=content-3″>Content-3</div> <div class=footer”>footer</div></div>

Here is the result:

See the Pen CSS Grid Format Named Lines by Mozilla Builders (@mozilladevelopers) on CodePen.

Quick Tip: Do you know you’ll have the opportunity to customise the colour of the grid overlay in Firefox DevTools? The above instance is on a white background, and the default purple will not be the very best shade to make use of. When deciding on an overlay grid to show, you will note a circle subsequent to the grid identify that signifies the colour of the overlay. Click on on that circle, and you’ll customise the colour to no matter youd like. Strive a distinct shade, akin to purple. Youll need to make use of Firefox Quantum to entry this function. Dont have Quantum but? Obtain Firefox Quantum Developer Version here.

Thats a wrap on getting began with CSS Grid Format. You’ll have the opportunity to go to our playground for the total information on easy strategies to get began with CSS Grid Format. If you’re able to dive deeper intoCSS Grid Format is totally altering the sport for net design. It permits us to create advanced layouts on the net utilizing easy CSS. La moitié 2 CSS Grid Format, examine out the excellent guides on MDN.

Creator, developer, strategist, homebrewer, runner, sock fanatic, beard evangelist, author, drummer, adventurer, Oxford comma advocate, and human Swiss Military Knife.

More articles by Dan Brown


Veuillez vérifier ce grand service à: http://www.test-net.org/services/traceroute/ ou visitez GRATUIT menu SERVICES

[Total : 0    Moyenne : 0/5]

4 réflexions sur la “Une Introduction à CSS Format de Grille: La moitié 2

Laisser une Réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont marqués *