Advanced CSS Tutorial -- Grid Layout

01 Grid layout

Modules provide a grid-based layout system, including rows and columns, making it easier to design web pages without using floats and positioning. Most grid layouts consist of a parent element and one or more child elements.

02 The grid container determines the layout

HTML element with or set on its displayattribute . All immediate children of the grid container will automatically become grid items.gridinline-grid

The grid is divided into: column col, row row, gap column rap, row rap.
Among them, the available attributes of rap:

• column-gap
• row-gap
• gap

This grid-template-columnsproperty defines the number of columns in the grid layout and it can define the width of each column.

The value is a space-separated list, where each value defines the width of the corresponding column.

If you want the grid layout to have 4 columns, specify a width of 4 columns, or "auto" if all columns should be the same width. You can use concrete if you want different widths width.

example:

.grid-container {
    
    
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Nesting of parent and child elements:

.grid-container {
    
    
  display: grid;
  grid-template-columns: auto auto auto auto;
  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;
}

03 Center – for grid container (parent element)

center horizontally

Note: The total width of the grid must be smaller than the width of the container in order for justify-contentthe property to take effect and be placed in the CSS of the parent element. The specific attribute values ​​are as follows:

Grid items are independent:
space-evenlycenter in the middle;
space-aroundgrid items are all in the middle;
space-between, left to left, right to right, and center to center.
Similar to text:
center: Grid items are all concentrated together, which is equivalent to the aggregation of text;
start: Grid items are concentrated, and all are left.

The vertical centering
align-content property is used to vertically align the entire grid in the container. The specific property values ​​are as above, and the usage method is corresponding to the horizontal centering.

Note: The total height of the grid must be less than the height of the container align-contentfor the property to take effect.

04 grid items

The lines between columns are called column lines. The lines between rows are called row lines.

Example: put the grid item at column 1 and have it end at column 3. Added to the class of the child element.

.item1 {
    
    
  grid-column-start: 1;
  grid-column-end: 3;
}

This grid-areaattribute is available as a grid-row-start, grid-column-start, grid-row-end and grid-column-endproperty .

Example: Make "item8" start at row 2 and column 1 and span 2 rows and 3 columns:

.item8 {
    
    
  grid-area: 2 / 1 / span 2 / span 3;
}

grid-template-areasCan be used to name and build layouts:

.item1 {
    
     grid-area: header; }
.item2 {
    
     grid-area: menu; }
.item3 {
    
     grid-area: main; }
.item4 {
    
     grid-area: right; }
.item5 {
    
     grid-area: footer; }

.grid-container {
    
    
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

The diagram is as follows:

05 Other attributes

The following are common attributes of Grid layout and their functions:

Attributes	effect
grid-template-columns/grid-template-rows	Defines the column/row size and number of grid containers.
grid-template-areas	Defines the layout of regions within a grid container.
grid-row/grid-column	Specifies the row/column position of the grid item.
grid-row-start/grid-row-end/grid-column-start/grid-column-end	Specifies the row/column position where grid items start and end.
grid-column-gap/grid-row-gap	Defines the spacing between grid rows/columns.
justify-items/align-items	Controls the alignment of grid items on rows/columns.
justify-content/align-content	Controls the alignment of the grid on rows/columns, used when the size of the grid container is larger than the grid content.
grid-auto-rows/grid-auto-columns	Defines the size of rows/columns that are not explicitly sized in the grid container.
grid-auto-flow	Defines the orientation and order of grid items that are automatically placed within the grid container.
grid-template	Defines the column/row size and number of grid containers, and the layout of the grid areas.
grid-area	Specifies the size and position of the grid item, and also gives the item a name for use in grid-template-areas.
order	Defines the order of grid items within the grid container.
z-index	Defines the order of grid items in the grid stacking order, with a stacking effect.