summary
Grid layout is the most powerful CSS layout scheme.
It divides the web page into grids, and can arbitrarily combine different grids to make a variety of layouts.
Grid layout is similar to flex layout. You can specify the location of multiple items inside the container. However, there are also significant differences. Flex layout is a grid layout. You can only specify the location of the "project" for the grid. It can be regarded as a one-dimensional layout. Grid layout is to divide the container into "rows" and "columns", generate cells, and then specify the cell of "project", which can be regarded as a two-dimensional layout. The grid layout is far more powerful than the flex layout.
Basic concepts
Containers and items
The area with grid layout is called "container". The sub elements located in the container by grid are called "item s"
<div class="container"> <div class="item"><p>1</p></div> <div class="item"><p>2</p></div> <div class="item"><p>3</p></div> </div>
Rows and columns
The horizontal area inside the container is called a row, and the vertical area is called a column
Cell
The intersection of rows and columns is called "cell". N rows and m columns will produce n x m cells
Grid line
The lines that divide the mesh are called grid lines. The horizontal grid line divides the trip, and the vertical grid line divides the column. Under normal circumstances, there are n + 1 horizontal grid lines in row N and m + 1 vertical grid lines in column m
Container properties
display
display: grid specifies that a container adopts grid layout.
.container{
display: grid; // Container elements are block level elements
// Display: inline grid / / the container element is an inline element
}
grid-template-columns，grid-template-rows
After the container specifies the grid layout, it is then divided into rows and columns. The grid template columns attribute defines the column width of each column, and the grid template rows attribute defines the row height of each row
// For a grid with three rows and three columns, the column width and row height are 100px
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
// For a grid with three rows and three columns, the column width and row height are 33.33%
.container {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
repeat()
It is very troublesome to write the same value repeatedly, especially when there are many grids. At this time, you can use the repeat() function to simplify the repeated value and accept two parameters. The first parameter is the number of repetitions (the value in this example is 3) and the second parameter is the value to be repeated
// For a grid with three rows and three columns, the column width and row height are 33.33%
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
// For the grid with three rows and three columns, the column width and row height are 100px, 20px and 80px in turn
.container {
display: grid;
grid-template-columns: repeat(3, 100px 20px 80px);
grid-template-rows: repeat(3, 100px 20px 80px);
}
Auto fill keyword
The cell size is fixed, but the container size is uncertain. If you want each row (or column) to hold as many cells as possible, you can use the auto fill keyword to indicate automatic filling
// Each column is 100px wide and then automatically filled until the container cannot place more columns
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
Demo example: https://jsbin.com/pexizusude/edit?html,css,output
fr keyword
In order to express the scale relationship conveniently, the grid layout provides the fr keyword (abbreviation of fraction, which means "fragment"). If the width of the two columns is 1fr and 2fr respectively, it means that the latter is twice that of the former. It seems that FR will occupy the width and height of the container in proportion
// Two columns of the same width are rows, and the second row is the 2-bit height of the first row
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 2fr;
}
// The width of the first column is 150 pixels, and the width of the second column is half that of the third column
.container {
display: grid;
grid-template-columns: 150px 1fr 2fr;
}
Demo example: https://jsbin.com/rinaxuyeko/edit?html,css,output
minmax()
Generate a length range, indicating that the length is within this range. It accepts two parameters, minimum and maximum.
// 3 columns, minimum 100px and maximum 1fr in the last row
.container {
display: grid;
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
}
Demo example: https://jsbin.com/vamoqaviyi/edit?html,css,output
auto keyword
Indicates that the length is determined by the browser itself
// 3 columns, the width of the first column and the last column is 100px, and the middle value occupies the remaining space
.container {
display: grid;
grid-template-columns: 100px auto 100px;
}
Demo example: https://jsbin.com/zanericiwu/edit?html,css,output
Name of the network line
In the grid template columns attribute and grid template rows attribute, square brackets can also be used to specify the name of each grid line for future reference. The grid layout is 3 rows x 3 columns, so there are 4 vertical grid lines and 4 horizontal grid lines. The names of the eight lines are in square brackets. Grid layout allows the same line to have multiple names, such as [Fifth line row-5]
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
grid-row-gap，grid-column-gap，grid-gap
The grid row gap attribute sets the spacing between rows (row spacing), and the grid column gap attribute sets the spacing between columns (column spacing). The grid gap attribute is a short form of the combination of grid column gap and grid row gap
// The first way to write
.container {
grid-row-gap: 20px;
grid-column-gap: 20px;
}
// The second way to write
.container {
grid-gap: 20px 20px;
}
According to the latest standards, the grid prefix of the above three attribute names has been deleted. Grid column gap and grid row gap are written as column gap and row gap, and grid gap is written as gap
grid-area，grid-template-areas
Grid elements are named through the grid area attribute, which can be referenced through the grid template areas attribute of the container.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>grid-area，**grid-template-areas actual combat**</title>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>grid-area attribute</h1>
<p>You can use <em>grid-area</em> Property to name the grid element.</p>
<p>Named grid elements can be created through the container grid-template-areas Property.</p>
<p>Grid layout container with 6 rows and 3 columns.</p>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
Demo address: https://jsbin.com/woyihekifi/edit?html,css,output
Note that the naming of the area affects the gridlines. The starting grid line of each area will be automatically named area domain name - start, and the ending grid line will be automatically named area domain name - end. For example, if the area name is header, the horizontal and vertical grid lines at the starting position are called header start, and the horizontal and vertical grid lines at the ending position are called header end
The grid area attribute can also be used as a combined shorthand form of grid row start, grid column start, grid row end and grid column end to directly specify the location of the project
.item {
/* grid-area: <row-start> / <column-start> / <row-end> / <column-end>; */
grid-area: 1 / 1 / 3 / 3;
}
Demo address: https://jsbin.com/yoximaloji/1/edit?html,css,output
grid-auto-flow
After meshing, the child elements of the container will be automatically placed in each grid in order. The default placement order is "first column then column", that is, fill the first row before putting the second row. The default value is row, which is "first column then last column". You can also set it to column, which becomes "column before row", row deny (which means "column before row", and fill it as closely as possible without spaces) and column deny (which means "column before row", and fill in spaces as much as possible). These two values are mainly used for how to automatically place the remaining items after some items are specified.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.container{
display: grid;
margin-bottom: 5px;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-flow: column;
grid-gap: 5px;
}
.container div{
text-align: center;
line-height: 100px;
color:#fff;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
<div>08</div>
<div>09</div>
</div>
</body>
</html>
Demo example: https://jsbin.com/cipayifesi/1/edit?html,css,output
justify-items,align-items,place-items
The justify items property sets the horizontal position (left, middle and right) of the cell content. The align items property sets the vertical position (top, middle and bottom) of the cell content. The place items property is a short form of the combination of the align items property and the justify items property
/*
start: Aligns the start edge of the cell.
end: Aligns the end edge of the cell.
center: Center the inside of the cell.
stretch: Stretch to fill the entire width of the cell (default)
*/
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}
.container {
/* If the second value is omitted, the browser considers it equal to the first value */
place-items: <align-items> <justify-items>;
}
Demo example: https://jsbin.com/lipatuxilu/1/edit?html,css,output
justify-content ,align-content ,place-content
The justify content attribute is the horizontal position (left, middle and right) of the entire content area in the container, and the align content attribute is the vertical position (top, middle and bottom) of the entire content area. The place content attribute is a combined shorthand form of the align content attribute and the justify content attribute.
/*
start - Align the start border of the container
end - Align the end border of the container
center - Center inside container
stretch - When the item size is not specified, the extrusion occupies the entire mesh container
space-around - The spacing on both sides of each item is equal. Therefore, the spacing between items is twice as large as the spacing between items and container borders
space-between - The interval between items is equal, and there is no interval between items and container borders
space-evenly - The interval between items is equal, and the interval between items and container border is the same length
*/
.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;
}
.container {
/*
If the second value is omitted, the browser assumes that the second value is equal to the first value
*/
place-content: <align-content> <justify-content>;
}
Demo example: https://jsbin.com/nexolijomi/1/edit?html,css,output
Project properties
grid-column-start ,grid-column-end ,grid-row-start ,grid-row-end
The location of cell items can be specified. The specific method is to specify the four borders of the item and the grid line to locate respectively. In addition to the grid lines, you can also specify them as the name of the grid line. Use these four attributes. If items overlap, use the z-index attribute to specify the overlapping order of items
- Grid column start attribute: the vertical grid line where the left border is located
- Grid column end attribute: the vertical grid line where the right border is located
- Grid row start attribute: the horizontal grid line where the top border is located
- Grid row end attribute: the horizontal grid line where the lower border is located
/* The left border of the first div is the first vertical grid line, the right border is the third vertical grid line, the upper border is the second horizontal grid line, and the lower border is the fourth grid line, */
.container div:nth-child(1) {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
/* Specifies the name of the grid line */
.container div:nth-child(1) {
grid-column-start: header-start;
grid-column-end: header-end;
}
/* span Keyword, indicating "span", that is, how many grids are crossed between the left and right borders (upper and lower borders) */
.container div:nth-child(1) {
grid-column-start: span 2;
}
Except item 1, all other items have no specified location and are automatically laid out by the browser. At this time, their location is determined by the grid auto flow attribute of the container
Demo example: https://jsbin.com/sugixexilo/edit?html,css,output
grid-column，grid-row
Grid column attribute is the combined abbreviation of grid column start and grid column end, and grid row attribute is the combined abbreviation of grid row start attribute and grid row end.
/* usage */
.item {
grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;
}
/* item-1 occupies the first row, from the first column line to the third column line */
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
/* Equivalent to */
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
/* The span keyword can be used to indicate how many grids are crossed */
.item-1 {
background: #b03532;
grid-column: 1 / 3;
grid-row: 1 / 3;
}
/* Equivalent to */
.item-1 {
background: #b03532;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
Demo example: https://jsbin.com/vivuheqivi/1/edit?html,css,output
grid-area
Attribute specifies which area the item is placed in. It is generally used together with the container attribute grid template areas. For details, see the explanation above (grid area, grid template areas)
justify-self，align-self，place-self
The justify self property sets the horizontal position (left, middle and right) of the cell content, which is exactly the same as the usage of the justify items property, but only works on a single item.
The align self property sets the vertical position (top, middle and bottom) of the cell content, which is exactly the same as the use of the align items property, and only works on a single item
The place self attribute is a combined shorthand form of the align self attribute and the justify self attribute
/*
start: Aligns the start edge of the cell.
end: Aligns the end edge of the cell.
center: Center the inside of the cell.
stretch: Stretch to fill the entire width of the cell (default)
*/
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}
/* If the second value is omitted, the place self attribute considers the two values equal */
.item {
place-self: <align-self> <justify-self>;
}
Reference blog: https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html