Grid grid layout

Grid

With grid layout, you can make your page layout look like a grid. You can place each component in the desired position.

HTML:

<div id="container">  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div>css

 

CSS:

#container {  display: grid;  grid: repeat(2, 60px) / auto-flow 80px;}#container > div {  background-color: #8ca0ff;  width: 50px;  height: 50px;}

Effect:

 

Grid-gap

Define the distance between elements

  Grid-column-gap/GRID-row-gap

Grid-column-gap: defines the distance between columns and columns

Grid-row-gap: defines the distance between rows.

Grid-column-Start/end and gird-row-Start/end

Grid-column-start:Specifies the gridline in which the start baseline of the column to be modified is located.

Grid-column-end:Specifies the gridline in which the end baseline of an element is changed. This increases the space occupied by an element.

Grid-row-Start/end:The above functions are the same, but the line is changed.

Grid-template-columns/rows

Grid-template-columns: Set the width of each column element

Grid-template-rows: Set the height of each element.

 

 

 

 

 

Grid grid layout