Understand CSS3 Grid layout in 10 minutes

Basic Introduction

In the previous article, we introduced CSS3 flexbox. Today, let’s talk about another powerful feature of CSS3: Grid.

Grid should be very familiar to front-end developers. It is translated into Chinese as "grid". Those who have used bootstrap, semantic ui, and ant design must be familiar with grid layout. In the past, grid layout in CSS frameworks was generally implemented through float and percentage width. This implementation has several disadvantages:

• The html is not concise enough;
• Float removal is required to avoid high collapse;
• The number of columns is fixed and cannot be defined flexibly. For example, bootstrap has 12 columns, semantic ui has 16 columns, and ant design has 24 columns.

Of course, grid can also be implemented with flex, but it is not much simpler than using float, and flex is good at one-dimensional space layout, but not good at two-dimensional space like grid. Now CSS3 has implemented grid from the specification and standard level, and the programming experience has been greatly improved!

compatibility

usage

Grid is a two-dimensional grid system consisting of several columns and rows.

1. Column

(1) Set columns

The Grid in CSS3 can be divided into any number of columns, and the width of each column can be set arbitrarily! Let's look at a simple example:

html:

<div id="content">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

css:

body{
    color: #fff;
    text-align: center;
}
#content{
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    max-width: 960px;
    margin: 0 auto;
}
#content div{
    background: lightgrey;
    padding: 30px;
}
#content div:nth-child(even){
    background: skyblue;
}

Effect:

When we set display: grid and grid-template-columns: 33.3% 33.3% 33.3% , #content is divided into a grid of three rows and three columns. At this time, #content is called a grid container, and the child elements of #content are called grid items.

We can also change the number and width of columns arbitrarily, for example:

#content{
    grid-template-columns: 10% 20% 30% 40%;
}

Effect:

(2) fr (fraction)

CSS3 introduces a new unit FR (fraction), which means "fraction" in Chinese. It is used to replace percentage. Because percentages (decimals) are not divisible, using fractions can avoid writing multiple decimal places. For example, a grid with three columns of equal width can be represented as:

grid-template-columns: 1fr 1fr 1fr;

(3) repeat

We can also use the repeat method to simplify the writing of column or row. The repeat method accepts two parameters. The first parameter indicates the number of repetitions, and the second parameter indicates the repeated content. Therefore, we can also express the grid with three columns of equal width as follows:

grid-template-columns: repeat(3, 1fr);

When we need to define a large number of columns, repeat becomes very useful. For example, if we want to define a grid with 10 columns of equal width, we can write repeat(10, 1fr) instead of repeating 1fr 10 times.

2. Row

(1) Set row

After we set the column, the row will be automatically generated due to the line break of the element, but we can still set the number and height of the row.

CSS:

#content{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 60px);
    max-width: 960px;
}

Effect:

You can see that although there is no content in the fourth row, the row does exist and occupies that space.

(2) minmax

In the above example, we give the row a fixed height, which leads to a problem: if a grid item contains a lot of content, part of the content will not be displayed due to the fixed height, as shown below:

To solve this problem, CSS provides the minmax function, which allows us to set the minimum and maximum heights of the row. When the maximum height is auto, the height of the row can be adaptive:

CSS:

grid-auto-rows: minmax(60px, auto);
// or grid-template-rows: repeat(3, minmax(60px, auto));

Effect:

(3) Grid gap

If we want to add spacing between rows and columns, there are also ready-made methods:

css:

grid-gap:{
  10px;
}

Effect:

3. Grid Line

In all the above examples, each grid item in the grid is arranged in the default order. What if we want to rearrange the layout and change the position or size of the grid item? For this purpose, the concept of grid lines is introduced. The so-called grid lines are the dividing lines after the grid is divided into several equal parts. The horizontal and vertical lines numbered 1 to 8 in the figure below are grid lines:

<img src="http://lc-jOYHMCEn.cn-n1.lcfi...;/>

By defining the starting and ending grid lines of the grid item, we can control the position and coverage area of ​​the grid item. A simple example:

html:

<div id="content">
    <div class="one">1</div>
</div>

css:

 #content {
  display: grid;
  grid-template-columns: repeat(8, 100px);
  grid-template-rows: repeat(8, 100px);
  grid-gap: 10px;
}

.one {
  grid-column-start: 3;
  grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 6;
}

Effect:

By setting grid-column-start/end grid-row-start/end , it is equivalent to setting the starting and ending coordinates for the grid item. The above CSS can also be abbreviated as:

.one {
  grid-column: 3 / 6;
  grid-row: 3 / 6;
}
// or .one {
  grid-area: 3 / 3 / 6 / 6;
}

If the grid item's starting grid line is default, we can just set its span:

.one{
  grid-column: span 3;
  grid-row: span 3;
}

4. Grid Area Template

In addition to layout through grid lines, CSS3 provides a more powerful layout method: grid area template. Rather than explaining what a grid area template is, let's look at the code:

html:

<div id="content">
    <header>Header</header>
    <main>Main</main>
    <section>Section</section>
    <aside>Aside</aside>
    <nav>Nav</nav>
    <footer>Footer</footer>
</div>

css:

body {
  color: #fff;
  text-align: center;
}

#content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, auto);
  max-width: 960px;
  margin: 0 auto;
  grid-gap: 10px;
  grid-template-areas: 
  "header header header header"
  "aside . main main"
  "nav . main main" 
  "section section section section"
  "section section section section"
  "footer footer footer footer";
}

#content>* {
  background: #3bbced;
  padding: 30px;
}

header { grid-area: header; }
main { grid-area: main; }
section{ grid-area: section; }
aside { grid-area: aside; }
nav { grid-area: nav; }
footer { grid-area: footer; }

Effect:

Do you understand? The key point is grid-template-areas property of the grid container. We set a grid area for each grid item, and then set a grid area template (grid-template-areas) in the grid container. Each line of string in the template represents a row, and each area name represents a column. The geometric layout is completely simulated with text. Blank grid items are represented by . Of course, when using grid area, you must pay attention to strict syntax. CSS cannot parse syntax like "header main header main" . The structure simulated by the area name must be a whole in two-dimensional space, because each grid item cannot be divided.

The advantages of using grid area template are also obvious when implementing responsive layout. We only need to formulate different grid area templates for different screen sizes.

5. Justify and Align

Similar to flex, grid can also set justify and align to adjust the horizontal and vertical alignment of grid items. It also supports settings for grid container or individual grid item.

Set the grid container

html:

<div id="content">
    <div class="one">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

css:

#content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(120px, auto));
  grid-gap: 10px;
  max-width: 960px;
  align-items: start;
  justify-items: end;
}

Effect:

Note: flex uses justify-content while grid uses justify-items . The values ​​in flex are flex-start/flex-end while grid uses start/end . The default values ​​for both justify and align are stretch .

Set the grid item

CSS:

.one{
  align-self: start;
  justify-self: end;
}

Effect:

practice

With the above knowledge, we can use CSS3 Grid to quickly create various layout effects. Here are a few simple codepen examples:

12-column grid layout

Petal layout

Responsive layout

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.