Display: Grid Layout tutorial for myself

By zhangxinxu from www.zhangxinxu.com/wordpress/?… This article can be reproduced in full, personal website without authorization, as long as the original author, source and link in the text can be retained, any website can be summary aggregation, commercial please contact authorization.

I. Preface & index

Set display:grid to block elements like

div {
    display: grid;
}Copy the code

The div is a “Grid container,” and its children are called “grid children.” In a Grid layout, all related CSS properties fall into exactly two sets, one for the Grid container and one for the Grid children. See the following table for details, click to quickly index.

Applied to the Grid container	Act on the grid child
grid-template-columns grid-template-rows grid-template-areas grid-template grid-column-gap grid-row-gap grid-gap justify-items align-items place-items justify-content align-content place-content grid-auto-columns grid-auto-rows grid-auto-flow grid	grid-column-start grid-column-end grid-row-start grid-row-end grid-column grid-row grid-area justify-self align-self place-self

Grid layout related CSS attributes although many, but in fact are not difficult to understand, difficult is that these attributes are not easy to remember, need a lot of actual handwriting to be easy to use.

Grid layout is a two-dimensional layout method, with vertical and horizontal directions always present at the same time. Many of these layout concepts match exactly the layout of Chinese farmland.

So, to me, a Grid layout is like “dividing the fields and planting the land.” The story is that Boss Zhang is a programmer, saved a little money, and then due to the urbanization of his hometown, there are few people in the countryside, the land is abandoned there, so he contracted a piece of land, planning to raise fish, a variety of fruit trees. The contracted place is very large, how to divide the land has become a problem, so The boss zhang plans to use Grid layout to divide.

CSS properties applied to the Grid container

1. The grid – the template – the columns and the grid – the template – rows

These two CSS properties are used to create basic columns for fields. Columns are vertical columns. “Rows” is a horizontal division. In the real world, the layout of farmland is generally divided into the following two types:

1. Field A- field B, and below that is land C- land D, which is the construction of the word “field”, except that the four fields are separated by A small walkable trench of negligible width.

   

2. Field A- field ridge – field B, and below is land C- field ridge – land D, which is also the structure of the word “field”, but the separation between the four fields is A walking ridge, and some places are also called earth ridges.

   

Here the division syntax is the same as the above farmland division, as follows:

.container { grid-template-columns: <track-size> ... | <line-name> <track-size> ... ; grid-template-rows: <track-size> ... | <line-name> <track-size> ... ; }Copy the code

In Chinese, it means:

. Container {grid-template-columns: < field >... Or < ridge > < field >... ; Grid-template-rows: < grid >... Or < ridge > < field >... ; }Copy the code

That is:

• : Divide the size of the field. These can be length values, percentage values, and FR units (the percentage of remaining space in the grid).
  
• : specifies the name of the middle ridge used for walking.

Look at a simple example:

.container {
    grid-template-columns: 80px auto 100px;
    grid-template-rows: 25% 100px auto 60px;
}Copy the code

Grid-template-columns are 80px, auto and 100px from left to right. Grid-template-columns are 80px and 100px respectively. The grid-template-Rows attribute contains four values representing four rows, each 25%, 100px, Auto, and 60px from top to bottom.

The real-time effect is as follows:

25% higher than 80 px wide

Wide auto high 25%

25% higher than 100 px wide

100 px wide 80 px high

Auto high 100 px wide

100 px wide 100 px high

80 px wide high auto

Wide auto high auto

100 px wide high auto

80 px wide high 60 px

Wide auto high 60 px

100 px wide high 60 px

We can also name “tian Long”, i.e. the grid divider, using the syntax [] to wrap our custom name, which can be Chinese, for example:

Container {grid-template-columns: [first column] 80px [column 2] auto [column 3] 100px [last column]; Grid-template-rows: [first row start] 25% [first row end] 100px [row 3] auto [row 4] 60px [row end]; }Copy the code

The real-time effect is as follows: Select the name of the corresponding grid line to highlight its position:

[Start of first line] [end of first line] [line 3] [Line 4] [end of line]

25% higher than 80 px wide

Wide auto high 25%

25% higher than 100 px wide

100 px wide 80 px high

Auto high 100 px wide

100 px wide 100 px high

80 px wide high auto

Wide auto high auto

100 px wide high auto

80 px wide high 60 px

Wide auto high 60 px

100 px wide high 60 px

Why name grid lines?

A Grid layout is like a street partition, a field partition, and the dividing lines in the middle are usually roads or rows. If we don’t give these roads a name, it’s hard to describe an area when we want to describe it. For example:

Nanjing East Road starts from the Bund in the east and ends at Xizang Middle Road in the west.

Because we give roads names, when we describe an area, it’s easy for others to identify it. But if it is not named, it is described as follows:

Nanjing East Road is near huangpu River No. 1 Road and No. 8 Road.

Well, the description of this area is problematic, in case one day the road is closed, or a new road is built, won’t it be chaotic?

That is, dividing lines in a Grid layout are named so that they better describe the area. If we don’t have a requirement to describe an area, we don’t need a name.

Double named

Since the grid lines in the middle of the grid are common to both sides of the grid, just as a road has two sides, we can have two names (separated by Spaces) for each side of the grid. Such as:

Container {grid-template-columns: [first column] 80px [first column end, second column start] 100px [last column]. }Copy the code

Repeat the grammar

For example, if we create a grid with a width of 960px, we will have to write 40px 24 times. If we create a grid with a width of 960px, we will have to write 40px 24 times. In this case, we can use repeat().

.container {
    grid-template-columns: repeat(24, 40px [col-start]);
}Copy the code

Is equal to:

.container { grid-template-columns: 40px [col-start], 40px [col-start], /* ... Omit 20... */, 40px [col-start], 40px [col-start]; }Copy the code

What are the fr units?

Fr is a contraction of the word fraction, which means a fraction.

• Let’s start with a simple example:

  .container {
      grid-template-columns: 1fr 1fr 1fr;
  }Copy the code

  1:1:1, three equal grid width, real-time effect is as follows:

  The width of 1FR takes up 1/3

  The width of 1FR takes up 1/3

  The width of 1FR takes up 1/3

• If there is a fixed size value, divide the remaining space size, for example:

  .container {
      grid-template-columns: 200px 1fr 1fr 1fr;
  }Copy the code

  The width of the next three columns is 1/3 of the grid container width minus 200 pixels. The real-time effect is as follows:

  200 px wide

  Wide 1 fr

  Wide 1 fr

  Wide 1 fr

• What happens if YOU mix it with auto?

  .container {
      grid-template-columns: auto 1fr 1fr 1fr;
  }Copy the code

  Wide auto

  Wide 1 fr

  Wide 1 fr

  Wide 1 fr

  As can be seen from the above effect, when the fr size is set, the size of Auto is shown as “parcel”, which is the content width. If there is no grid with fr size set, it behaves as a stretch.

• What if the sum of fr values is less than one?

  Container {grid-template-columns: auto 0.25fr.25fr.25fr; }Copy the code

  Wide auto

  Width 0.25 fr

  Width 0.25 fr

  Width 0.25 fr

The calculation here is relatively complicated. First, since the first grid size is set to auto, the remaining space required by FR calculation is the width of the grid container minus the width of the characters “wide auto”. So, the width of the next three 0.25fr elements is :(container width – “wide auto” character width) * 0.25. Then the remaining size is the first mesh width.

2. grid-template-areas

My area is defined as the grid-template-areas, and my grid-template-areas are the areas where we grow different crops and aquatic products.

The syntax is as follows:

.container { grid-template-areas: "<grid-area-name> | . | none | ..." "..." ; }Copy the code

Among them:

grid-area-name

The name of the corresponding grid region.

.

Represents an empty grid cell.

none

No grid region is defined.

Let’s look at this CSS property through examples. Boss Zhang contracted a piece of land, and then divided into 3*4 a total of 12 small grid, and then Boss Zhang wants the top 3 grid for grapes, the bottom 3 grid for watermelon, the middle 6 grid, the left 2 to raise lobster, the right 4 to raise fish. As shown below:

The CSS code is as follows:

.container { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; (3) What are the grid-template-areas: Grape-grapes, lobster, fish, and watermelon? }Copy the code

There are 12 grids and four areas. Therefore, we only need four elements for the grid sub-item. The HTML diagram is as follows:

<div class="container">
    <div class="putao"></div>
    <div class="longxia"></div>
    <div class="yangyu"></div>
    <div class="xigua"></div>
</div>Copy the code

Grid-area: grid-area: grid-area: grid-area: grid-area: grid-area

.putao {grid-area: grape; }. Longxia {grid-area: lobster; }. Yangyu {grid-area: fish farming; }.xigua {grid-area: watermelon; }Copy the code

The layout effect of real-time Grid is as follows:

Grape-growing region

Lobster farming area

Fish culture area

Watermelon growing area

Note: If we name the grid region but do not name the grid line, the grid line name is automatically generated based on the grid region name by adding -start and -end to the region name. For example, if the name of a grid area is grapes, the name of the column line on the left is grape-start and the name of the column line on the left is grape-end.

In addition, our grid area must form a regular rectangular area, any L shape, concave or convex shape is not supported, will be considered invalid attribute values.

// ZXX: In the actual development, the grape growing area is the head area, the lobster is the sidebar area, the fish farming area is the main area and the watermelon growing area is the bottom area.

3. grid-template

Grid-template is an abbreviation for grid-template-rows, grid-template-columns, and grid-template-Areas attributes.

The syntax is as follows:

.container {
    grid-template: none;
}
.container {
    grid-template: <grid-template-rows> / <grid-template-columns>;
}Copy the code

None indicates that all three CSS properties are set to their initial values.

For example, the former Boss Zhang breeding zone division, with grid-template abbreviation is expressed as:

.container {grid-template: "grapes" 1fr "lobster fish" 1fr "watermelon watermelon watermelon" 1fr / 1FR 1FR; }Copy the code

The real-time effects are as follows:

Grape-growing region

Lobster farming area

Fish culture area

Watermelon growing area

Since grid-template does not reset some implicit grid properties (such as grid-auto-columns, grid-auto-rows, and grid-auto-flow), it is recommended to use grid instead of grid-template most of the time.

4. The grid – column – gap and the grid – row – gap

Grid-column-gap and grid-row-gap attributes are used to define the size of the gap in the grid. You can think of it as the width of rows to walk between fields.

The syntax is as follows:

.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}Copy the code

Among them:

<line-size>

The size of the gap between the grids.

For example, given a simple 2×2 grid, set the horizontal grid gap to 10px and the vertical grid to 15px as follows:

.container {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 2fr;
    grid-column-gap: 10px;
    grid-row-gap: 15px;
}Copy the code

The browser real-time layout renders as follows:

5. grid-gap

The CSS Grid-Gap attribute is short for grid-column-gap and grid-row-gap attributes. The syntax is as follows:

.container {
    grid-gap: <grid-row-gap> <grid-column-gap>;
}Copy the code

First horizontal row and then vertical column, this is easier to remember, the old saying goes: “horizontal and vertical are dead”, first horizontal and then vertical, the gap of the grid is like the “ten” in the middle of the Chinese character “tian”, according to the Chinese character writing, first horizontal and then vertical, remember.

For example, the 2×2 grid gap case above could also be written:

.container {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 2fr;
    grid-gap: 15px 10px;
}Copy the code

The effect is the same, so I don’t want to take up space here.

6. justify-items

Precision-items specifies how grid elements should be rendered horizontally, whether stretched horizontally, or justified left, middle, and right, using the following syntax:

.container {
    justify-items: stretch | start | end | center;
}Copy the code

Among them:

stretch

Default value, stretch. It is shown as horizontal filling.

start

This is shown as the horizontal size of the grid shrinks to the content size while being aligned along the grid line to the left (assuming the document flow direction does not change).

end

This is shown as the horizontal size of the grid shrinks to the content size while being aligned along the grid line to the right (assuming the document flow direction does not change).

center

This is represented by the horizontal size of the grid shrinking to the content size while being horizontally centered within the current grid area (assuming the document flow direction has not changed).

The real-time effect of each attribute value is as follows (click the menu box to experience the layout effect of different attribute values) :

7. align-items

Align-items specifies the vertical rendering of grid elements, whether vertically stretched or vertically aligned. The syntax is as follows:

.container {
    align-items: stretch | start | end | center;
}Copy the code

Where (assuming the document flow direction is the default page) :

stretch

Default value, stretch. It is shown as vertical filling.

start

This is shown as the vertical size of the grid shrinks to the content size while being aligned along the upper grid lines.

end

This is shown as the vertical size of the grid shrinks to the content size while being aligned along the lower grid lines.

center

The vertical size of the grid shrinks to the content size while being vertically centered and aligned within the current grid area.

The real-time effect of each attribute value is as follows (click the menu box to experience the layout effect of different attribute values) :

8. place-items

Place-items allows the align-items and context-items properties to be written in a single declaration. The syntax is as follows:

.container {
    place-items: <align-items> / <justify-items>;
}Copy the code

Align -items come first and justify-items come second. The first letters a,j, a,j, a, J, repeat, repeat, repeat, do you see how they sound like Angelababy? Yes, remember Angelababy and that’s how we remember the order here. Or there is an old saying, called “vertical and horizontal”, this grid alignment, there is the meaning of “vertical and horizontal” in the inside, vertical in the front, horizontal in the back, also can facilitate our memory.

It is said that prior to Edge15 the place-items attribute is not supported, so if there are compatibility concerns, it is recommended to write separately.

9. justify-content

Context-content specifies how grid elements are distributed horizontally. This property only works if the total grid width is smaller than the grid container width. For example, our grid is set to a fixed width value, and the result is that there is still space left. Such as:

.container {
    display: grid;
    width: 300px;
    grid-template: 100px 100px/100px 100px;
}Copy the code

At this point, there is 100px left in both the horizontal and vertical directions, and the justify-content attribute is useful.

The syntax is as follows:

justify-content: stretch | start | end | center | space-between | space-around | space-evenly;Copy the code

Among them:

stretch

The default value. The grid container will be stretched until the grid target size is set to Auto. If the grid size is set to auto, the grid container will not be stretched.

start

The default value. Logical CSS property value, which is related to the document flow direction. The default is left justified.

end

Logical CSS property value, which is related to the document flow direction. The default is right justified.

center

It is centered and aligned.

space-between

Both ends are aligned. Between stands for middle, meaning that extra space is allocated only in the middle of the element. The abstract graph is shown as follows:

space-around

Around means around, which means that each Flex subitem is surrounded by a non-interfering equal width of white space on both sides, resulting in a visual margin that is half the width of the middle. The abstract graph is shown as follows:

space-evenly

Instituted means even, equal. That is, visually, the space between the two sides of each Flex subitem is exactly equal. The abstract graph is shown as follows:

Seeing is believing, click the corresponding single check box below to see the real-time layout effect:

Grid layout related CSS in the above and following examples are:

.container {
    grid-template: auto auto/auto auto;
}Copy the code

10. align-content

Align-content can be thought of as a similar and opposite property to justify, which specifies how grid children are distributed horizontally, while align-content specifies how grid elements are distributed vertically. The align-content property has no effect if all grid children have only one line.

The syntax is as follows:

align-content: stretch | start | end | center | space-between | space-around | space-evenly;Copy the code

Among them:

stretch

The default value. Each row of Flex child elements is stretched proportionally. For example, if there are two rows of Flex child elements, the stretch height of each row is 50%.

start

Logical CSS property value, which is related to the document flow direction. The default is top stacking.

end

Logical CSS property value, which is related to the document flow direction. The default is bottom stack.

center

The whole is vertically centered and aligned.

space-between

The upper and lower lines are aligned at both ends. And then we’re left with the remaining space equally divided for each row.

space-around

Each row of elements has independent, non-overlapping white space above and below it.

space-evenly

Each row of elements is exactly equal to the top and the bottom.

Seeing is believing, we set the Flex container to a height of 500 pixels and click the corresponding checkbox below to see the layout in real time:

11. place-content

Place-content allows the align-content and context-Content properties to be written in a CSS declaration, commonly known as an abbreviation. The syntax is as follows:

.container {
    place-items: <align-content> / <justify-content>;
}Copy the code

Align -content comes first and justify-content comes second. A, J, a, J, say it a few times, make sure it sounds the same as Angelababy, and remember angelababy in this order. Or there is an old saying, called “vertical and horizontal”, this grid distribution, there is the meaning of “vertical and horizontal” in the inside, vertical in the front, horizontal in the back, can also be convenient for us to remember.

It is said that Edge15 and previous versions do not yet support the place-content attribute (not tested by myself), so it is advisable to write it separately if there are compatibility concerns.

12. The grid – auto – the columns and the grid – auto – rows

Specifies the size of any automatically generated grid track (also known as implicit grid track). Implicit tracks are created when there are more grid items than cells in the grid or when grid items are placed outside the explicit grid.

Use zhang boss to contract land case explanation is:

1. Land division, the plan is divided into 16 areas for agriculture, the materials are bought, the result found that the land contract can only put down 12 areas, more than 4 how to do? Just plant something outside the contracted land, don’t waste it.
2. The plot is divided and the plan is to plant grapes on the top and watermelons on the bottom. However, there was a planting mistake and the watermelon was planted outside the contracted area.

In both cases, they grew something outside of their land for a variety of reasons. What if Mr. Zhang wants to size a growing area that is not on his land? Grid-auto-columns and grid-auto-rows are used for this scenario.

// ZXX: In Grid layout, these abnormal grids are called “implicit grids”, and those displayed in specified containers are called “explicit grids”.

The syntax is as follows:

.container { grid-auto-columns: <track-size> ... ; grid-auto-rows: <track-size> ... ; }Copy the code

Among them:

<track-size>

Size the fields. It could be a length value, a percentage value, and
Fr unit(Unit of proportion of grid remaining space).

Let’s use an example to get a feel for the grid-auto-columns and grid-auto-rows properties. CSS is as follows:

.container { display: grid; width: 150px; grid-template-columns: 60px 60px; grid-template-rows: 30px 90px; grid-auto-columns: 60px; } .item-a { grid-column: 1 / 2; grid-row: 2 / 3; }. Item-b {/* The container level is only 2 cells, but here is set to the third, the grid is created */ grid-column: 3/4; grid-row: 2 / 3; Background - color: rgba (255255, 0, 5); }Copy the code

The real time effect is as follows, the.item-b width is forced to be 60px, otherwise, it is auto, in this case, it fills the remaining 30px miserably:

.item-a

.item-b

13. grid-auto-flow

The grid-auto-flow property controls the placement of grid children that are not explicitly located. For example, if you define a 5*2 10 cell, there are five elements, two of which specify which cell to put, and three of which are self-contained. At this point, the arrangement of the three elements is controlled by the grid-auto-flow property.

The syntax is as follows:

.container {
  grid-auto-flow: row | column | row dense | column dense
}Copy the code

Among them:

row

The default value. Grids that do not have a specified location are arranged horizontally in order to take precedence.

column

Grids with no specified position are arranged vertically in order.

dense

“Dense” means “dense”. If this parameter is set, it indicates that the dense packing algorithm is enabled for auto collation. If the mesh that appears later is small, try to see if there is a good place to put it in front of you to make the mesh as dense and compact as possible. This attribute value only changes the visual order, causing DOM attributes to differ from the actual rendering order, which is not accessibility friendly and is recommended for use with caution.

Examples speak, CSS is known as follows:

.container{grid-template: 1fr 1fr 1fr/1fr 2fr 2fr 1fr 2fr; } .item-a { grid-column: 1; grid-row: 2 / 4; } .item-b { grid-row: 1 / 3; } .item-c {} .item-d {} .item-e {}Copy the code

Item-a.i tem-b is fixed horizontally. Click the option below to experience the layout change.

.item-a

.item-b

.item-c

.item-d

.item-e

• The selectedrow, horizontally arranged, at this time.item-cIt’s high enough to fit in the upper-left grid, so the visual order is C, B, D, E.
• The selectedcolumn, vertically arranged, at this time.item-cIt’s not wide enough to fit in the upper-left grid, so the visual order (up, down, left, right) is B, C, D, E.
• The selectedrow dense, horizontal, at the same time in front of the empty drill. Same visual sequencerowProperties.
• The selectedcolumn dense, vertically arranged, at this time.item-cPlaced in the upper-left grid, so the visual order (up, down, left, right) is C, B, D, E, B, and D vertically.

14. grid

Is an abbreviated collection of all of these CSS attributes, grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, The grid – auto – the columns and the grid – auto – flow.

The syntax is as follows:

• grid: noneCopy the code

  None indicates that all child attributes are set to their initial values.

• grid: <grid-template>Copy the code

  This is the same as grid-template. For example:

  .container {
      grid: 100px 300px / 3fr 1fr;
  }Copy the code

  Equivalent to the following:

  .container {
      grid-template-rows: 100px 300px;
      grid-template-columns: 3fr 1fr;
  }Copy the code

• grid: <grid-template-rows> / [ auto-flow && dense? ]  <grid-auto-columns>?Copy the code

  The question mark? Zero or one is optional. The dense keyword and grid-auto-columns values can be omitted.

  Specific instructions:

  • auto-flow && dense? The value of grid-Auto-flow is the same as row or column or Row dense or column dense.

    However, row and column keywords are replaced by auto-flow keywords. That’s a problem: when to parse a row and when to parse a column?

    This is determined by whether the auto-flow keyword is to the left or right of the slash. If the auto-flow keyword is to the left of the slash, it is resolved to row, and if to the right, it is resolved to column. The syntax here is to the right of the slash, so grid-auto-flow is resolved to column.

  • 
    
    , so it can be omitted. If omitted, grid-auto-columns are resolved to auto.
    
    

  We learned the syntax here through a few examples:

  .container {
      grid: 100px 300px / auto-flow 200px;
  }Copy the code

  The CSS code above omits the dense keyword and enables
  
  , so it is equivalent to the following CSS:
  

  .container {
      grid-template-rows: 100px 300px;
      grid-auto-flow: column;
      grid-auto-columns: 200px;
  }Copy the code

  Remember that in Grid layouts, slashes are preceded by rows-related attributes and slashes are followed by columns related attributes (same below).

• grid: [ auto-flow && dense? ]  <grid-auto-rows>? / <grid-template-columns>Copy the code

  This syntax is similar to the previous syntax, except that the slash is preceded by an implicit grid and followed by a display. In this case, since auto-flow is to the left of the slash, it resolves to row. So:

  .container {
      grid: auto-flow dense 100px / 1fr 2fr;
  }Copy the code

  Equivalent to the following CSS:

  .container {
      grid-auto-flow: row dense;
      grid-auto-rows: 100px;
      grid-template-columns: 1fr 2fr;
  }Copy the code

The grid abbreviation syntax is a bit confusing the first time you learn it. At first glance, it looks like the head is too big for all sorts of symbols other than letters. Actually &, [,],? These symbols are not actually written, they are used only to represent logic.

Ok, send Buddha to the west, I will give you a final comb:

• grid:noneIt’s so easy and so relaxing. There’s nothing to talk about.
• If the grid layout is well-behaved, no cells go outside the grid containergrid-templateProperties.
• The last two grammars are only used when a grid outside the container is present, eithergrid-template/auto-flow, orauto-flow/grid-templateIt’s that simple.

To put it bluntly, in fact, there is nothing, at the beginning of the use of not skilled is very normal, you practice a few times, more than a few handwritten, you will soon be able to master, become a small Grid layout expert.

CSS properties applied to grid children

1. Grid-column-start, grid-column-end, grid-row-start and grid-row-end

Represents the start and end positions, both horizontal and vertical, of the region occupied by the grid child.

Just like boss Zhang raises fish, the fish pond east where to start, to the west where, where is the south, north and where, all have to be clear, so that the area and position of the fish pond also come out.

The syntax is as follows:

.item {
    grid-column-start: <number> | <name> | span <number> | span <name> | auto
    grid-column-end: <number> | <name> | span <number> | span <name> | auto
    grid-row-start: <number> | <name> | span <number> | span <name> | auto
    grid-row-end: <number> | <name> | span <number> | span <name> | auto
}Copy the code

Grammar of pipe delimiter | said the meaning of “or”, so don’t see the above for a long, is actually a property value, in particular:

<number>

Start and end with a few grid lines.

<name>

Name of a custom gridline.

span <number>

Indicates that the current grid automatically spans the specified number of grids.

span <name>

Indicates that the current grid is automatically expanded until the specified grid line name is matched.

auto

Fully automatic, including positioning, span, etc.

Look at the examples to speak, CSS and HTML as follows:

Container {grid-template-columns: [first column] 80px [column 2] auto [column 3] 100px [last column]; Grid-template-rows: [start row] 25% [end row] 100px [line 3] auto [end row]; } .item-a { grid-column-start: 2; The grid - column - end: ordinate 3; Grid-row-start: the start of the first line; grid-row-end: 3; }Copy the code

<div class="container">
    <div class="item-a"></div>
</div>Copy the code

The real-time effects are as follows:

number: 2

Name: ordinate 2
Number: 1 Name: start from the first line
number: 3

Name: bar 3
Number: 3 Name: line 3

.item-a

Each Grid line has a built-in

, counting from 1. The top Grid layout is 3×3, so there are 4 Grid lines horizontally and vertically (including edges), from left to right the 4 lines

values are 1-4, and the vertical direction is similar from top to bottom.

In this example, all grid lines are given Chinese names, such as “the first vertical line”, which is the leftmost vertical grid line. Therefore, the end result is not difficult to understand

Grid-column-start :2 Grid-column-end: the line on the right side of the item-a grid where

is the line on the right side of the grid. Grid-row-start: item-a line above the grid that begins with

as the first line; Grid-row-end :3 indicates that item-a ends on the line below the grid with

3.

Span performance

Let’s look at the span keyword again. CSS and HTML as follows:

.item-b { grid-column-start: 2; Grid-column-end: span 3; Grid-row-start: the start of the first line; grid-row-end: span 3; }Copy the code

<div class="container">
    <div class="item-b"></div>
</div>Copy the code

Results as follows:

number: 2

Name: ordinate 2
Number: 1 Name: start from the first line
number: 3

Name: bar 3
number: 3
number: 4

.item-b

For named gridlines, there is no difference between a span and no SPAN (including multiple gridlines with the same name), but for numerical gridlines, there is a difference, with a SPAN indicating the number of spans rather than the serial number of gridlines. Grid-row-end :span 3 indicates that the current grid needs to cover three grids. So, we can see that.item-b is all over the grid.

2. The grid – the column and the grid – row

Grid-column is short for grid-start + grid-column-end, and grid-row-start + grid-row-end is short for grid-row.

Syntax is delimited by slashes as follows:

.item {
    grid-column: <start-line> / <end-line> | <start-line> / span <value>;
    grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}Copy the code

Grammar of pipe delimiter | said the meaning of “or”. Then

is the grid-*-start attribute value, and

is the grid-*-end attribute value. Such as:

. Item-b {grid-column: 2 / span 3; Grid-row: first line start/span 3; }Copy the code

Is equal to:

.item-b { grid-column-start: 2; Grid-column-end: span 3; Grid-row-start: the start of the first line; grid-row-end: span 3; }Copy the code

3. grid-area

Grid-area indicates the area occupied by the current grid. This property was demonstrated in the introduction to the Grid-template-Areas attribute, where we use the grid-template-Areas attribute to define some grid areas, and then use the grid-area attribute to have grid children specify the use of these areas, which automatically results in region distribution.

Grid-area and grid-column/grid-row are used to distribute grid sub-items, but grid-area has better semantics and recognition, which is suitable for layout areas with functional attributes (such as header and bottom), and also supports irregular areas.

The syntax is as follows:

.item {
    grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}Copy the code

Among them:

<name>

Region name. by
grid-template-areasProperty creation.

<row-start> / <column-start> / <row-end> / <column-end>

Occupies the starting position of the grid area.

attribute value use refer to the above boss Zhang divide fish pond case. Here we demonstrate the following location-based partitioning:

.container {
    grid-template: 1fr 1fr 1fr/1fr 1fr 1fr 1fr;
}
.item-c { 
    grid-area: 1 / 2 / 3 / 4;
}Copy the code

1/2/3/4 divided area

Indicates that the horizontal grid line positions start and end at 1,3, and the vertical grid line positions are 2,4. So you get a 2 by 2 region.

4. justify-self

Illustration-self represents the horizontal alignment of individual grid elements. The syntax is as follows:

.item {
    justify-self: stretch | start | end | center;
}Copy the code

Where (assuming the document flow direction does not change) :

stretch

Default value, stretch. It is shown as horizontal filling.

start

The horizontal size of the grid shrinks to the content size while being displayed aligned along the left side of the grid line.

end

The horizontal size of the grid shrinks to the content size and is displayed aligned along the right side of the grid line.

center

The horizontal size of the grid shrinks to the content size and is displayed horizontally centered and aligned within the current grid area.

The real-time effect of each attribute value is as follows (click the menu box to experience the layout effect of different attribute values) :

5. align-self

Align-self specifies the vertical rendering of grid elements, whether vertically stretched or vertically aligned. The syntax is as follows:

.container {
    align-self: stretch | start | end | center;
}Copy the code

Where (assuming the document flow direction is the default page) :

stretch

Default value, stretch. It is shown as vertical filling.

start

This is shown as the vertical size of the grid shrinks to the content size while being aligned along the upper grid lines.

end

This is shown as the vertical size of the grid shrinks to the content size while being aligned along the lower grid lines.

center

The vertical size of the grid shrinks to the content size while being vertically centered and aligned within the current grid area.

The real-time effect of each attribute value is as follows (click the menu box to experience the layout effect of different attribute values) :

6. place-self

Place-items allows the align-self and context-self attributes to be written in a single declaration. The syntax is as follows:

.container {
    place-items: <align-self> / <justify-self>;
}Copy the code

The order here is align-self before sequence-self. The first letters a,j, a,j, a, J, repeat, repeat, repeat, do you see how they sound like Angelababy? Yes, remember Angelababy and that’s how we remember the order here.

It is said that Edge15 and previous versions do not yet support the place-self attribute, so it is advisable to write it separately if there are compatibility concerns.

Four, other Grid knowledge points

• In the Grid layout,float.display:inline-block.display:table-cell.vertical-alignAs well ascolumn-*These attributes and declarations have no effect on grid children. This is common sense in Grid layout, and is often asked in interviews.
• Grid layouts work well for larger scale layouts (2d layouts), while Flexbox layouts work best for components and small scale layouts (1d layouts) of applications. See “Display: Flex Layout For yourself” for Flex layouts.
• Although the CSS file name supports Chinese characters, the Chinese characters of the CSS file may be garbled, so…… It’s up to you to be innovative or conservative.
• Internet Explorer 10- Internet Explorer 15, while nominally supporting Grid layout, supports the old syntax (this article is all 2.0 new syntax) and needs to be added-ms-Private prefix, energy reasons, IE under the use of not in-depth study, later have the opportunity to supplement.

In addition:

All descriptions of horizontal and vertical, left and right directions in this paper are given on the premise that both horizontal and vertical flows of the web page are the default directions.

The advantage of this tutorial is that the interaction can be experienced in real time and is more intuitive. If it is to reprint the article, must have no effect, access to the original.

Grid layout itself has not been used in the actual project before, the content of this article is also learning while writing, if there are inaccurate expressions in the article welcome correction.

Thanks for reading!

See article: A Complete Guide to Grid

CSS World
Click to display the purchase code

// Want a tip? Click here. Got something to say? Click here.