Grid layout is a two-dimensional layout system proposed by W3C, through display: grid to set up the use of some of the previous complex layout can be more simple to solve. This article provides a brief overview of grid layout through several layouts. Grid is currently supported only with Edge prefix. For a better experience, use Chrome and enable #enable-experimental-web-platform-features in Chrome ://flags. In addition, you can go to Grid by Examples for more examples, W3 Specification for more usage, and A Complete Guide to Grid

Live Demo

Left and right fixed middle adaptive

Previously, this required usenegative margin.float.positionSolution, the Grail layout is a better solution. Later,flexCome out of nowhere, useflex-grow 与 flex-basisComplete adaptive layout.gridCompared to the layoutflexLayout is simpler, just need incontainerSet ongrid-template-columns: 100px auto 100px.

.container {
  display: grid;
  grid-template-columns: 100px auto 200px;
}Copy the code

trisection

The previous method can be setfloat: left; width: 33.33333333, the use offlexYou can set theThe flex - basis: 33.33333333. In the Grid you only need to set it upgrid-template-columns: 1fr 1fr 1fr 

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 100px;
  background-color: #feb;
}Copy the code

7 points

Set the container to a decile in the grid and you can use itgrid-template-columns: repeat(10, 1fr).repeatIs repeated 10 times1fr.grid-column 为 grid-column-start 与 grid-column-endBeginning and endingline. Using the grid to lay out a grid system is also easy.

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

.column-3 {
  grid-column: 1 / 4;
}

.column-7 {
  grid-column: 4 / 11;
}Copy the code

Complex layout

These examples are all one-way layouts,flexCan be very good solution, and the following layout, are two-dimensional layout, traditional layout some difficulties. The following example diagram can be found incontainerFor use ongrid-template-areasIn theitemSet ongrid-areaProperty to set the complex layout.

<div class="grid-layout">
  <div class="header">header</div>
  <div class="left">left</div>
  <div class="main">main</div>
  <div class="right">right</div>
  <div class="footer">footer</div>
</div>Copy the code
.container {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 40px 300px 50px;
  grid-template-areas: "header header header"
                       "left main right"
                       "footer footer footer";
}

.container .header {
  grid-area: header;
}

.container .footer {
  grid-area: footer;
}

.container .left {
  grid-area: left;
}

.container .right {
  grid-area: right;
}

.container .main {
  grid-area: main;
}Copy the code

Scratchable latex

It’s more difficult in a traditional layout. Set three rows and three columns of equal width in the grid and usegrid-gapSet the gap.

.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 8px;
  border: 1px solid #fac;
  padding: 8px;
}Copy the code

reference