The Grid is the most powerful CSS layout scheme. – nguyen half-stretching

It’s almost 2020 and you haven’t used a grid yet? Although js has been overtaking CSS in recent years, CSS has made a lot of progress. Elastic layout, grid layout has been supported by major browsers, greatly convenient for us to cut graphics, no longer need to use the bootstrap grid system, grid layout native support! SO EASY ~

This article focuses on the introduction of Grid layout application examples, so the introduction part is just a simple arrangement of some properties (mainly convenient for their query use), recommended to refer to ruan Yifeng CSS Grid layout tutorial.

Introduction to the

The Grid layout divides the container into “rows” and “columns”, producing the cells where the project resides.

The container

The container is set to display: grid; Or display: inline – grid; The element.

project

The item is the top child of the container.

Grid lines

Grid lines are lines at the edges of a project.

Container attribute

Container properties must be set on the container.

Set the container to row or inline grid layout:

display: grid;
display: inline-grid;
Copy the code

With grid layout, float, display: inline-block, display: table-cell, vertical-align, and column-* Settings for container child elements (items) are invalidated.

grid-template-columns: 100px 100px 100px; Grid-template-rows: 100px 100px 100px; grid-template-rows: 100px 100px; Grid-template-areas: 'a a a a' 'b b b' 'c c c'; Grid-template is a short form of the above three attributes, not easy to read and write, not recommendedCopy the code

Note that the name of the region affects the grid lines. The start grid line for each region is automatically named -start and the end grid line is automatically named -end. For example, if the region name is header, the horizontal and vertical grid lines at the start position are called header-start, and the horizontal and vertical grid lines at the end position are called header-end.

Set the interval between items

grid-row-gap: 20px; Grid-column-gap: 20px; grid-column-gap: 20px; Grid-gap: <grid-row-gap> <grid-column-gap>; Grid-column-gap: grid-row-gap: grid-column-gap: grid-row-gap: grid-column-gap: grid-row-gap: grid-column-gap: grid-column-gap: grid-row-gapCopy the code

The horizontal/vertical position of the entire content area inside the 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; place-content: <align-content> <justify-content>; // A combined short form of the align-content and context-content attributesCopy the code

Horizontal/vertical position of the item content in the cell

justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: start | end | center | stretch;
Copy the code

Repeat ()/minmax() functions and auto-fill/auto-fill/auto/ FR keywords

grid-template-columns: repeat(3, 100px); Grid-template-columns: repeat(auto-fit, 100px); // repeat(auto-fit, 100px); Grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); Grid-template-columns: repeat(3, 1fr); Grid-template-columns: 100px 1fr 2fr; Grid-template-columns: 100px auto; grid-template-columns: 100px auto; Grid-template-columns: 1fr 1fr minmax(200px, 2fr); Grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; // [c1] is the grid line nameCopy the code

Sometimes, some items are assigned locations outside of the existing grid. For example, the grid has only three columns, but an item is specified on row 5. At this point, the browser automatically generates an extra grid to place the project.

grid-auto-columns: 50px 50px 50px; Grid-auto-rows: 50px 50px 50px; Grid-auto-flow // The child elements of the container are arranged in order: row" first column", column" first row", Row dense and column denseCopy the code

The project properties

Project properties must be set on the project.

The location of an item can be specified by specifying which grid line is located on each of the four borders of the item.

grid-column-start: 1; Grid-column-end: 2; grid-column-end: 2; Grid-row-start: 1; grid-row-start: 1; Grid-row-end: 2; grid-row-end: 2; // grid-column: 1/2; // Grid-column-start and grid-column-end can also combine grid lines and span keyword grid-row: 1/2; Grid-area: a // Specifies the area in which the project is to be placed. Grid-template-area on the container divides the area by grid-template-areaCopy the code
justify-self: start | end | center | stretch; / / set the horizontal position align cell contents of self: start | | end center | stretch; Place-self: <align-self> < context-self >; // A combined short form of the align-self and context-self attributesCopy the code

Layout instance

A two-column layout

Fixed on one side, adaptive on the other: address

<style>.container{ display: grid; grid-template-columns: 100px auto; // 100px 1fr}</style>
<div class="container">
  <aside></aside>
  <main></main>
</div>
Copy the code

Twelve grid layout

address

<style>
.container{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
</style>
<div class="container">
  <div>1</div>.</div>
Copy the code

Horizontal and vertical center

The Grid layout is currently the only way to center a single line of CSS code horizontally: addresses

<style>
.container{
  display: grid;
  place-content: center;
}
</style>
<div class="container">
  <div>asdf</div>
</div>
Copy the code

Adaptive end alignment

This effect is difficult to achieve in the last line of left – aligned effect. If you use the Flex layout or text-align: justify (see here) method, you need to use equal columns of empty label space, and it is difficult to justify the last line left without knowing how many columns there are. A grid layout perfectly aligns both ends to the left of the last line.

Item width fixed: address

Item width is not fixed: address

Table with limited column width

The third column is the sum of the first two columns if the width is sufficient (i.e., the first two columns are both greater than 100px), at least 200px: address

.container {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(200px, 2fr);
}
Copy the code

The holy grail layout

Adaptive mobile Holy Grail layout: Address

Grid line based layout

Use various means to achieve the following simple layout:

Based on grid line number placement item: address

You can also use the SPAN keyword: address

Use named grid line layout: address

Use the named grid line layout 2: Address

Use the repeat() function to repeatedly create the same defined grid: address

Use named regions and implicitly named grid lines: addresses

conclusion

Recently, I accidentally hit my foot when I was moving bricks…… Oh no, recently when I was moving bricks, I came across a layout with both ends aligned and left aligned at the bottom. Then I tried text-align in the CSS world. Vue’s V-for generates code that does not allow space between elements, which makes it ineffective

As a result of just learning grid layout, the article is a little rough, please excuse me. I will update this post when I come across interesting grid layouts in the future.

It’s 2020, and it’s time for a grid layout.