CSS grid tutorial

grid. Digital frontier. As they move around in the computer, I try to display the information clusters graphically. What do they look like? Boat? motorcycle? Is it a track like a highway? I have always dreamed of a world I have never seen before. Then one day... I went in. —Tron: the old version

• Introduction to CSS Grid
• basis
  • Grid template columns and grid template rows
  • Auto size
  • Different column and row sizes
  • Add space between units
  • Generate items on multiple columns and/or rows
  • Shorthand grammar
• usegrid-areaAs shorthand
• usespan
• More grid configurations
  • Use score
  • Use percentage and rem
  • userepeat()
  • Specify the minimum width of the line
  • Positioning element usegrid-template-areas
  • Add empty cells in the template area
• Fill the page with a grid
• Examples: header, sidebar, content and footer
• wrap up

Introduction to CSS Grid

CSS Grid is a fundamentally new way of using CSS to build layouts.

Pay attentionCSS grid layout page on caniuse.comFind out which browsers are currently supported. At the time of writing, in April 2019, all major browsers (except IE will never support it) already support the technology, covering 92% of all users.

CSS Grid is not a competitorFlexible box. They can interoperate and collaborate on complex layouts, because CSS Grid can work on 2 dimensions (rows and columns), while Flexbox can work on one dimension (row OR column).

Traditionally, the architectural layout of the Web is a complex topic.

I will not go into the reasons for this complexity, which is a complicated topic in itself, but you can consider yourself a very lucky person, because nowYou have 2 very powerful and supported tools at your disposal:

• CSS Flexbox
• CSS grid

These two tools are tools for building the future Web layout.

Unless you need to support older browsers like IE8 and IE9, there is no need to mess up the following:

• Table layout
• Floating point
• clearfix hacker
• display: tableHacker

In this guide, everything you need to know from the zero-knowledge CSS Grid to becoming a skilled user.

basis

CSS grid layout in the container element (can bedivOr any other label) by settingdisplay: grid.

As with flexbox, you can define some properties on the container and define some properties on each individual item in the grid.

The combination of these attributes will determine the final appearance of the grid.

The most basic container properties aregrid-template-columnswithgrid-template-rows.

Grid template columns and grid template rows

These properties define the number of columns and rows in the grid, and also set the width of each column/row.

The following code snippet defines a grid with 4 columns (200 pixels per column) wide and 2 rows (300 pixels high per column).

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}

This is another example of a grid with 2 columns and 2 rows:

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 100px 100px;
}

Auto size

Many times, you may have a fixed header size, a fixed footer size, and the main content, which is highly flexible, depending on its length. In this case, you can useautoKey words:

.container {
  display: grid;
  grid-template-rows: 100px auto 100px;
}

Different column and row sizes

In the above example, we made a beautiful, regular grid by using the same value for the rows and the same value for the columns.

You can specify any value for each row/column to create many different designs:

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
}

another example:

.container {
  display: grid;
  grid-template-columns: 10px 100px;
  grid-template-rows: 100px 10px;
}

Add space between units

Unless otherwise stated, there is no space between cells.

You can add spacing using the following properties:

• grid-column-gap
• grid-row-gap

Or shorthand grammargrid-gap.

example:

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

The same layout using shorthand:

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
  grid-gap: 25px;
}

Generate items on multiple columns and/or rows

Each cell item can choose to occupy multiple boxes in a row, and then expand horizontally or vertically to get more space while observing the grid ratio set in the container.

These are the attributes we will use for this:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

example:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
.item6 {
  grid-column-start: 3;
  grid-column-end: 5;
}

The numbers correspond to the vertical lines separating each column, starting at 1:

The same principle applies togrid-row-startwithgrid-row-end, Except that this time does not occupy more columns, but a unit occupies more rows.

Shorthand grammar

These attributes have the following shorthand syntax:

• grid-column
• grid-row

The usage is very simple, this is how to copy the above layout:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column: 2 / 4;
}
.item6 {
  grid-column: 3 / 5;
}

usegrid-areaAs shorthand

Thisgrid-areaAttributes can be used asgrid-columnwithgrid-rowShort form, when you need to apply both elements to a single element. Instead of:

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

you can use it

.item1 {
  grid-area: 1 / 3 / 4 / 5;
}

(Start of grid row/start of grid column/end of grid row/end of grid column)

usespan

Another way is to set the starting column/row and usespan:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column: 2 / span 2;
}
.item6 {
  grid-column: 3 / span 2;
}

spanYou can also use non-shorthand syntax:

.item1 {
  grid-column-start: 2;
  grid-column-end: span 2;
}

And you can also use it on the start attribute. In this case, the final position will be used as a reference, andspanWill count as "back":

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

More grid configurations

Use score

In each case, specifying the exact width of each column or row is not ideal.

The score is the unit of space.

The following example divides a grid into 3 columns with the same width,¹⁄₃Every available space.

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

Use percentage and rem

You can also use percentages, as well as mix and match scores, pixels, rem, and percentages:

.container {
  grid-template-columns: 3rem 15% 1fr 2fr
}

userepeat()

repeat()Is a special function that uses a number to indicate the number of times a row/column will be repeated and the length of each row/column.

If each column has the same width, you can use the following syntax to specify the layout:

.container {
  grid-template-columns: repeat(4, 100px);
}

This will create 4 columns with the same width.

Or use score:

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

Specify the minimum width of the line

Common use case: When resizing the window, the sidebar will not collapse to more than a certain number of pixels.

This is an example taken by the sidebar¹⁄₄The content on the screen, and the size is not less than 200 pixels:

.container {
  grid-template-columns: minmax(200px, 3fr) 9fr;
}

You can also useautoKey words:

.container {
  grid-template-columns: minmax(auto, 50%) 9fr;
}

Or just the minimum:

.container {
  grid-template-columns: minmax(100px, auto) 9fr;
}

Positioning element usegrid-template-areas

By default, elements are placed in the grid according to their order in the HTML structure.

usegrid-template-areasYou can define template areas to move them around in the grid, or you can generate an item on multiple rows/columns instead of usinggrid-column.

This is an example:

<div class="container">
  <main>
    ...
  </main>
  <aside>
    ...
  </aside>
  <header>
    ...
  </header>
  <footer>
    ...
  </footer>
</div>

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
  grid-template-areas:
    "header header header header"
    "sidebar main main main"
    "footer footer footer footer";
}
main {
  grid-area: main;
}
aside {
  grid-area: sidebar;
}
header {
  grid-area: header;
}
footer {
  grid-area: footer;
}

Despite the original order, the item is still placed ingrid-template-areasDefinition depends ongrid-areaProperty associated with them.

Add empty cells in the template area

You can use dot to set an empty cell.Instead of the area namegrid-template-areas:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
  grid-template-areas:
    ". header header ."
    "sidebar . main main"
    ". footer footer .";
}

Fill the page with a grid

You can use the following methods to expand the grid to fill the page:fr:

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

Examples: header, sidebar, content and footer

This is a simple example of using CSS Grid to create a site layout. The site layout provides the top of the header, the main part (the sidebar on the left and the content on the right), and the footer.

This is the mark:

<div class="wrapper">
  <header>Header</header>
  <article>
    <h1>Welcome</h1>
    <p>Hi!</p>
  </article>
  <aside><ul><li>Sidebar</li></ul></aside>
  <footer>Footer</footer>
</div>

This is the CSS:

header {
  grid-area: header;
  background-color: #fed330;
  padding: 20px;
}
article {
  grid-area: content;
  background-color: #20bf6b;
  padding: 20px;
}
aside {
  grid-area: sidebar;
  background-color: #45aaf2;
}
footer {
  padding: 20px;
  grid-area: footer;
  background-color: #fd9644;
}
.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
}

I added some colors to make it more beautiful, but basically it will be assigned to each different labelgrid-areaName forgrid-template-areasproperty.wrapper.

When the layout is small, we can use media queries to place the sidebar below the content:

@media (max-width: 500px) {
  .wrapper {
    grid-template-columns: 4fr;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

View on CodePen