The Complete Guide to Grid Layout in CSS

Grid is a two-dimensional grid layout system. With it, we can easily implement complex layouts without using float , inline-block , position which are essentially hack methods.

CSS Grid Layout is good at dividing a page into several main areas, and defining the size, position, hierarchy and other relationships of these areas (provided that HTML generates these areas).

Like a table, the grid layout allows us to align elements in rows or columns. However, for layout, grids are more likely to be done or easier than tables.

Grid layout concepts

Before learning, you need to understand the following concepts of grid.

Grid Tracks

A grid track is the space between two grid lines. They are defined in the grid by using the properties grid-template-columns and grid-template-rows .

There are two rows and three columns in the above picture. A row or a column is called a track.

Grid Lines

Using Grid Layout to define tracks in an explicit grid also creates grid lines.

Grid lines can be addressed by their numbers. In left-to-right languages,列線1 would be on the left side of the grid, and行線1 would be on the top of it. Line numbering follows the document's writing mode, so in a right-to-left language,列線1 line will be on the right side of the grid. The image below shows the line numbering of this grid, assuming the language is from left to right.

Grid Cell

In Grid Layout, a grid cell is the smallest unit in the CSS grid. It's the space between four grid lines, much like a table cell.

Grid Areas

A grid area is a rectangular area in a grid consisting of one or more grid cells. In essence, the grid area must be rectangular. For example, it is not possible to create T-shaped or L-shaped grid areas.

Gutters

Grid gutter is the spacing between grid tracks and can be created in Grid Layout using grid-column-gap and grid-row-gap .

Using Grid Layout

Similar to flex, to use grid layout, you first need a container. You can get a grid container by setting display of an element to grid . The children of a container are grid items, which are similar to td in table , but more flexible.

float , clear , and vertical-align elements have no effect on a grid container.

Properties on containers

Grid Template

After creating the grid container, we can define how many rows and columns the grid has, and the size of each row and column.

grid-template-rows

We use grid-template-rows to explicitly define how many rows the grid has. It can take the following values:

The none keyword indicates an ambiguous grid. All rows and their sizes will be implicitly specified grid-auto-rows property.

非負值的長度大小: such as px, em, vw , etc.

百分比: relative to the grid container. If it is inline-grid , the percentage value will be treated as auto

flex : A non-negative value that uses the unit fr to define the elastic coefficient of the grid track size. Each grid track with flex defined will be allocated proportionately to the remaining available space

The max-content keyword indicates that the maximum content of the grid item will occupy the grid track.

The min-content keyword indicates that the grid track is occupied by the largest and smallest content of the grid item.

auto If the grid track is at its maximum size, it is equivalent to max-content ; if it is at its minimum size, it is equivalent to min-content

grid-template-columns

It is similar to grid-template-rows , one sets grid rows and the other sets grid columns.

.container {
    display: grid;
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;
} 

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
} 

Functions available in Grid

In the Grid layout, we can also use the following 3 functions

repeat()

The repeat function can be used to express large and repeated expressions in a more concise way.

For example, in the above grid-template-columns: 1fr 1fr 1fr; we can write it as repeat(3, 1fr) . Its first parameter is the number of repetitions, and can be auto-fill or auto-fit .

auto-fill

If the container has an explicit size or a maximum size, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container. If any number of repetitions would overflow, the number of repetitions is 1.

auto-fit

Same behavior as auto-fill , except that after the grid items are placed, any empty repeat tracks are collapsed.

#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
} 

minmax()

Defines a closed interval with a length and width range. It accepts two parameters, minimum and maximum. It returns the value in this interval.

For example, minmax(max-content, 300px) , the maximum value cannot be greater than 300px

minmax(200px, 1fr) cannot be less than 200px

fit-content()

It is equivalent to min(maximum size, max(minimum size, argument)) . The parameters can be length values ​​and percentages.

It takes a maximum value from the minimum value of the content and the parameter, and then takes a minimum value from the maximum value of the content.

That is, when the content is small, it takes the content length. If the content is large and the content length is greater than the parameter length, it takes the parameter length.

grid-template-areas

This attribute grid block needs to be used with grid-area , and its value can be none or字符串.

When it is a string, each given string will generate a row, and each cell separated by a space in a string will generate a column. Multiple cells with the same name that span adjacent rows or columns are called a grid area. Non-rectangular grid blocks are invalid.

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav main"
                       "nav foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
} 

grid-template-areas string, associated with grid-area of ​​the grid item, use it to define an area.

grid-template

It is an abbreviation of grid-template-rows , grid-template-columns , and grid-template-areas .

Its value can be divided into three cases:

• none
• rows/columns syntax can only be used when defining rows and columns, such as grid-template: 100px 1fr / 50px 1fr;
• When all three are present, they are separated by a / , and the right side is still columns , but the syntax on the left side is <line-names>? <string> <track-size>? <line-names>? .

.page {
    grid-template: [header-top] "aa a" [header-bottom]
                   [main-top] "bb b" 1fr [main-bottom]
                   / auto 1fr auto;
}
/*
line-names is optional, custom name, need to be wrapped in brackets, it is actually equivalent to the comment string grid-area associated value track-size the size of this line */

#page {
  display: grid;
  width: 100%;
  height: 200px;
  grid-template: [header-left] "head head" 30px [header-right]
                 [main-left] "nav main" 1fr [main-right]
                 [footer-left] "nav foot" 30px [footer-right]
                 / 120px 1fr;
}

header {
  background-color: lime;
  grid-area: head;
}

nav {
  background-color: lightblue;
  grid-area: nav;
}

main {
  background-color: yellow;
  grid-area: main;
}

footer {
  background-color: red;
  grid-column: foot;
} 

grid-row-gap / row-gap

Used to set the gutter size between row elements. Its value can be length, percentage or normal .

CSS Grid Layout was originally defined using the grid-row-gap property, which is now being replaced by row-gap. However, to be compatible with browsers that don't support the row-gap property, you need to use the property with a prefix.

.box{
    grid-row-gap: 1em;
} 

grid-column-gap / column-gap

Used to set the gutter size between element columns. Its value can be length, percentage or normal .

The default spacing for normal in multi-column layout is 1em, and the default spacing for other types of layout is 0.

Like grid-row-gap , it is gradually being replaced by column-gap .

.page {
    grid-column-gap: 1em;
} 

grid-gap / gap

It is an abbreviation of the above two properties, and the syntax is row-gap column-gap . If column-gap is not specified then it will be set to the same value as row-gap .

It was also gradually replaced by gap .

#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 5px;
}

#grid > div {
  background-color: lime;
} 

Implicitly created rows and columns

CSS grid automatically adjusts the position of each item on the grid based on the size and span of the surrounding items.

for example:

.box {
  display: grid;
  grid-template: 25px / 100px 160px;
  background: #000;
}
.box * {
  background: #ccc;
}
.box *:nth-child(even) {
  background: #777;
} 

We have only defined one row and two columns. But we have 5 child elements. CSS Grid decides to expand them into the implicitly created space, and the columns in the newly created implicit row automatically inherit the row height from the previously specified grid-template-rows property.

The four properties grid-column-start , grid-column-end , grid-row-start and grid-row-end are on the grid item. It can define the position of a grid item. If we set its position beyond the grid we defined, rows or columns will be created implicitly at that time.

grid-auto-rows

Specifies the size of implicitly created rows. Its values ​​can be:

• 長度值: px em vmax etc.
• 百分比: relative to the grid container
• flex : A non-negative value that uses the unit fr to define the elastic coefficient of the grid track size. Each grid track with flex defined will be allocated proportionately to the remaining available space
• The max-content keyword indicates that the maximum content of the grid item will occupy the grid track.
• The min-content keyword indicates that the grid track is occupied by the largest and smallest content of the grid item.
• auto If the grid track is at its maximum size, it is equivalent to max-content ; if it is at its minimum size, it is equivalent to min-content

Its value is the same as grid-template-rows .

.box {
  display: grid;
  grid-template: 25px / 100px 160px;
  gap: 10px 20px;
  grid-auto-rows: 50px;
  background: #000;
}
.box * {
  background: #ccc;
}
.box *:nth-child(even) {
  background: #777;
} 

grid-auto-columns

Specifies the column width of the implicitly created grid. Its value is the same as grid-auto-rows .

#grid {
  height: 100px;
  display: grid;
  grid-template-areas: "a a";
  grid-gap: 10px;
  grid-auto-columns: 200px;
}

#grid > div {
  background-color: lime;
} 

grid-auto-flow

Controls how the automatic layout algorithm works, specifying exactly how the elements being automatically laid out are arranged in the grid.

If we write several div in one div and set display: grid; on the parent, we can see that there is no change from a visual perspective. But if we add grid-auto-flow: column; to the parent div , we will find that the child elements are now displayed in one row, which is similar to the effect of a flexible box.

The values ​​for grid-auto-flow are as follows:

• row specifies that the automatic layout algorithm should arrange the elements by filling each row, adding new rows when necessary. (default value)
• column specifies that the automatic layout algorithm arranges elements by filling each column one by one, adding new columns when necessary.

You can also add the dense keyword after these two keywords. The syntax is [ row | column ] || dense .

This keyword specifies that the automatic layout algorithm uses a "dense" packing algorithm, which attempts to fill the gaps left by smaller elements in the grid. This will fill in the gaps left by the larger element, but may also disrupt the original order of appearance.

If it is omitted, a "sparse" algorithm is used, and the layout algorithm only moves "forward" when laying out elements in the grid, never going back to fill in the gaps. This ensures that all Auto Layout elements appear "in order", even if this may leave gaps that are filled by later elements.

grid-auto-flow: row;

grid-auto-flow: row dense;

grid

grid is a CSS shorthand property that includes almost all the properties mentioned above (except gap ).

As with other shorthand properties, if any of the sub-properties are not declared, their initial values ​​will be used. Additionally, although this shorthand declaration does not set the grid's gutters, the gutters are reset by this declaration.

Its values ​​can be divided into 3 categories

grid-template

It is the same as grid-template abbreviation, such as grid: [linename1] "a" 100px [linename2];

grid-template-rows / [ auto-flow && dense? ] grid-auto-columns?

grid-template-rows sets the row height ( grid-template-columns is set to none ), auto-flow after / must be written ( grid-auto-flow is set to column ), and finally grid-auto-columns specifies how to automatically repeat the column track ( grid-auto-rows property is set to auto ).

For example, grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;

[ auto-flow && dense? ] grid-auto-rows? / grid-template-columns

This method of writing is opposite to the previous one. This method sets grid-template-columns ( rows attribute is none ). Optionally set grid-auto-rows property ( columns is auto )

Such as grid: auto-flow dense / 30%;

Properties on Grid Items

grid-row-start, grid-row-end, grid-column-start, grid-column-end

Respectively specify the row start position, row end position, column start position, and column end position of the grid item in the grid.

This requires understanding the concept of grid lines introduced earlier. Horizontal lines (rows) increase from top to bottom, and vertical lines (columns) increase from left to right, and both start from 1.

They can take the following values:

auto means automatic placement, automatic span or default span is 1.數字represents the grid line span 數字represents the number of grids spanned.數字less than or equal to 0 are invalid. If the grid size is exceeded, rows or columns are implicitly created.

It is somewhat similar to table

If you set the position beyond the specified size, you will get unstable results, which should be avoided.

.box {
  display: grid;
  grid: 100px 100px / 100px 100px;
  background: #000;
}
.box * {
  background: #ccc;
}
.box *:nth-child(even) {
  background: #777;
}
.box1 {
  grid-column-start: span 5;
} 

grid-row, grid-column

grid-row and grid-column are abbreviations of the above four properties.

The syntax for their values ​​is start / end . If there is only one value then it is start , end value is the default auto .

When the number of columns is unknown, you can use -1 to make it extend to the end of the grid.

Using Negative Values

grid-area

Above we have shown the usage of grid-area combined with grid-template-areas . grid-area is actually an abbreviation of grid-row-start , grid-column-start , grid-row-end and grid-column-end .

Its default value is grid-area: auto;

If 4 values ​​are set, the order is:

grid-area: row-start / column-start / row-end / column-end;

If 3 values ​​are set, the last one is auto

If 2 values ​​are set, the last two are auto

If 1 value is set, the next three are auto

If the first item is自定義表示, then all the ignored items are custom representations.

.box1 {
  grid-area: a / a;
}

/* equivalent to */

.box1 {
    grid-row-start: a;
    grid-column-start: a;
    grid-row-end: a;
    grid-column-end: a;
}

Grid item content alignment

We can use align-self and justify-self to adjust the content alignment of the grid item.

align-self is used for vertical alignment, justify-self is used for horizontal alignment.

align-self

Flex layout can also use this property. It commonly uses the following three values:

1. start: content is aligned to the top
2. center: the content is vertically centered
3. end: content aligned to the bottom

justify-self

It commonly uses the following three values:

• start / left : content is aligned to the left
• cneter : center the content horizontally
• end / right : content is right aligned

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.