CSS Grid Layout Tutorial

OVERVIEW

The Grid Layout is the most powerful CSS layout scheme.
It divides the web page into a grid and the different grids can be combined arbitrarily to create various layouts. Previously, the effects could only be achieved through a complex CSS framework, however, it is built into the browser.

The layout like the one in the above picture is exactly where the grid layout excels.

The grid layout and the flex layout have certain similarities, which can specify the positions of multiple items inside the container. However, there are also significant differences between them.

The flex layout is the axis layout, which can only specify the position of the "item" relative to the axis and can be regarded as one-dimensional. the grid layout divides the container into "rows" and "columns", generating cells, and specifying the cell where the "item" is located, which can be regarded as a two-dimensional layout. the grid layout is much more powerful than the flex layout.

basic concept

The area adopting the grid layout is called a 'container'. the child elements positioned in the grid inside the container are called 'items'.

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

in the above code, the outermost

notice: the item can only be the top-level child elements of the container and not include the child elements of the item.
For example, the

element isn't the item in the above code. the grid layout only takes effect on items.

the horizontal area inside the container is called a "row", and the vertical area is called a "column".

in the above picture, the horizontal dark area is the "row", and the vertical dark area is the "column".

cell

The intersection area of the row and the column is called a "cell".

under the circumstances, n rows and m columns will generate nxm cells. For example,3 rows and 3 columns will generate 9 cells.

grid lines

The lines that divide the grid are called "grid lines". The horizontal grid lines divide the rows, and the vertical grid lines divide the columns.

under normal circumstances, there are n+1 horizontal grid lines in n rows and m+1 vertical grid lines in m columns. For example, there are four horizontal grid lines in three rows.

The properties of the container

The properties of the grid layout are divided into two categories. One category is defined on the container and is called container properties; the other category is defined on the item and is called item properties. the part first introduced the container properties.

display

display: grid specifies a container adopting the grid layout.

div {
  display: grid;
}

under default circumstances, the elements of the container are the block-level elements but they also can be set inline elements.

div {
  display: inline-grid;
}

the above code specifies that the div element is an inline element, and the inside of the element uses a grid layout.

notice: that after setting the element as a grid layout, the settings such as float, display: inline-block, display: table-cell, vertical-align, and column-* of the container child elements (items) will become invalid.

grid-template-columns and grid-template-rows

After the container specifies the grid layout. then we'll divide the container into rows and columns. the grid-template-columns attribute specifies the width of each column, and the grid-template-rows attribute specifies the height of each row.

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

In the above code, it specifies a grid of three rows and three columns. column width and row height both being 100px

In addition to using absolute units, percentages can also be used.

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

repeat()

sometimes, it's very troublesome to write the same value repeatedly, especially when there are many grids. at this time, we can use the repeat() function to simplify the repeated value. the above code is rewritten with repeat() as follows.

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

The repeat() function accepts two parameters, one parameter is the number of repetitions, and the other parameter is the value to be repeated.

auto-fill

sometimes, the size of the cell is fixed, but the size of the container is uncertain. if you want each row(or each column) to accommodate as many cells as possible, then the auto-fill keyword can be used to indicate automatic filling.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

the above code indicates the width of each column is 100px, then it is automatically filled until the container can no longer accommodate more columns.

fr

in order to facilitate the representation of proportional relationships, the grid layout provides fr keyword. if the width of two columns is 1fr and 2fr respectively, it means that the latter is twice as much as the former.

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

the above code represents two columns of the same width.

fr can be combined with the unit of the absolute length, and this will be very convenient.

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}

the above code represents that the width of the first column is 150px, and the width of the second column is half of that of the third column.

minmax()

The minmax() function generates a range of lengths and represents that length is within this range. it accepts two parameters, namely the min value and the max value.

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

in the above code, minmax(100px, 1fr) indicates that the width of the column is not less than 100px and not more than 1fr.

auto

The auto key indicates that the width of the column is determined by the browser.

grid-template-columns: 100px auto 100px;

in the above code, the width of the second column is basically equal to the maximum width of the cells in this column, unless the cells set the min-width attribute and the value is more than the biggest width.

layout instance

The grid-template-columns attribute is very useful for page layout. The two-column layout only requires one line code.

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}

in the above code, the left column is set to 70%, the right column is set to 30%.

the traditional grid layout is very easy to write.

grid-template-columns: repeat(12, 1fr);

grid-row-gap, grid-column-gap, grid-gap

the grid-row-gap attribute sets the gap between rows, and the grid-column-gap attribute sets the gap between columns.

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

the grid-gap attribute is the combined shorthand form of grid-column-gap and grid-row-gap and the syntax is as follows.

grid-gap: <grid-row-gap> <grid-column-gap>;

therefore, the above code of CSS is equivalent to the following code.

.container {
  grid-gap: 20px 20px;
}

if grid-gap omitted the second value, the browser considers the second value to be equals to the first value.

according to the latest standard, the grid- prefix of the three attribute name has been remove, grid-column-gap and grid-row-gap are written as column-gap and row-gap, and grid-gap is written as gap.

justify-items, align-items

the justify-items attribute is used for setting the horizontal position of the cell content, the align-items attribute be used for setting the vertical position of the cell content.

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

the writing of the two attributes is exactly the same, and they can both take the following values.

start： align the starting edge of the cell
end： align the ending edge of the cell
center： center inside the cell
stretch： stretch and occupy the entire width of the cell(default value)

.container {
  justify-items: start;
}

the above code indicates that the content of the cell is align-left, the effect is shown in the figure below.

.container {
  align-items: start;
}

the above code indicates that the content of the cell is aligned at the top and the effect is shown in the figure below

justify-content, align-content

the justify-content property is the horizontal position of the entire content area in the container, and the align-content property is the vertical position of the entire content area in the container.

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

the writing method of these two attributes is exactly the same, both can take the following values.

start - align the starting border of the container

end - align the ending border of the container

center - center inside the container

stretch - when the item size is not specified, it stretches to fill the entire gird container

item attribute

These attributes are defined on the item.

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

The specific method is to specify on which grid lines the four borders of the item are respectively positioned.

grid-column-start: the vertical grid line where the left frame is located
grid-column-end
grid-column-end: the vertical grid line where the right frame is located
grid-row-start: the horizontal grid line where the top frame is located
grid-row-end: the horizontal grid line where the bottom frame is located

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}

the above code indicates that the left frame of the item-1 is the second vertical grid line, and the right frame of the item-1 is the fourth grid line.

in the above figure， we only specify the right frame of the item-1, but do not specify the top frame and the bottom frame, so it can adopt the default position that the top frame is the first grid line and the bottom frame is the second grid line.

except the item-1, the other items do not have a specified position and are automatically laid by the browser, at this time their position is determined by the grid-auto-flow attribute of the container, the default value of the attribute is row, so it will be arranged "row by row first and then column by column".

justify-self, align-self

the justify-self attribute sets the horizontal position of the cell content
the align-self attribute sets the vertical position of the cell content

start： align the starting edge of the cell
end： align the ending edge of the cell
center： center inside the cell
stretch： stretch and occupy the entire width of the cell(default value)

.item-1  {
  justify-self: start;
}