Super practical tips for building complex layouts with CSS Grid!

Author: Shadeed
Translator: Front-end Xiaozhi
Source: dmitripavlutin

If you have dreams and dry goods, search [Moving the World] attention to this Shawanzhi who is still washing dishes in the early morning.

This article has been included in GitHub https://github.com/qq449245884/xiaozhi . There are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.

Grid layout is one of the most powerful features in modern CSS. Using grid layouts can help us build complex, fast-paced layouts without any external UI framework. In this article, I will introduce everything we need to know about CSS Grid.

Basics of CSS Grid

Let's go directly to the code, as shown below, write some tags first, the source code is in this link: https://codepen.io/Shadid/pen/zYqNvgv

<div class="container">
  <header>Header</header>
  <aside>Aside 1</aside>
  <section>Section</section>
  <aside>Aside 2</aside>
  <footer>Footer</footer>
</div>

Above, we created one header , two aside and one footer elements and wrapped them in a container element. We add background color and font size to all elements in the container element.

.container > * {
  background: aquamarine;
  font-size: 30px;
}

The web page that runs is as follows:

Now we add some grid properties:

.container {
  display: grid;
  grid-gap: 5px;
  grid-template-areas: 
    "header"
    "aside-1"
    "aside-2"
    "section"
    "footer"
}

/* Assign grid areas to elements */
header {
  grid-area: header;
}

aside:nth-of-type(1) {
  grid-area: aside-1;
}

aside:nth-of-type(2) {
  grid-area: aside-2;
}

section {
  grid-area: section;
}

footer {
  grid-area: footer;
}

First we define display:grid which will enable grid layout, then we use grid-gap to add gaps in the grid elements.

Next, we assign each html element a grid area name. In the container class, we can use the grid-template-areas` property to define the appearance of the html template, noting how the grid template areas are arranged.

grid-template-areas: 
    "header"
    "aside-1"
    "aside-2"
    "section"
    "footer" 

The order of elements is different from the dom structure. However, in the end it is presented in the order of our network areas.

The next step is to make our page responsive. We want to use a different layout on a larger screen. CSS Grid makes it very easy to handle media queries and create responsive layouts. See the code below:

@media (min-width: 670px) {
  .container {
    grid-template-areas: 
      "header  header  header"
      "aside-1 section  aside-2"
      "footer    footer    footer"
  }
}

All we have to do is reorder the grid template regions in the media query.

grid columns and rows

How to use CSS Grid to organize columns and sums? Start with the following code:

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item">Four</div>
  <div class="item">Five</div>
  <div class="item">Six</div>
</div>

add some basic css

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
}

.item {
  background: lightcoral;
}

We used grid layout for the dom structure above and increased the spacing between styles using grid-gap . Now, we use the grid-template-columns property to add some columns.

.container {
    display: grid;
    height: 100vh;
    grid-gap: 10px;
    grid-template-columns: 100px 200px auto auto;
}

Just like that, we used columns. We specify that the first 100px and the second 200px . Since we applied 3 in columns auto 4 the remaining screen length will be split in half there.

You can see that there is now a blank space on the page. What if I want to move the sixth column of to the third column of and the fourth column of ? For this we can use the grid-column-start and grid-column-end properties.

.item:nth-of-type(6) {
  grid-column-start: 3;
  grid-column-end: 5;
}

Note that we use grid-column-end: 5 and the value 5 points to the column line. The fourth column ends in the fifth row of the grid. grid-column-start and grid-column-end values refer to grid lines.

If you find the gridline values confusing, you can also use span , which will have the same effect as above:

.item:nth-of-type(6) {
  grid-column-start: 3;
  grid-column-end: span 2;
}

For span 2 , specify that div occupies two slots in the grid. Now, suppose you want to expand the second column of to fill the blank space below. We can also do this easily with the grid-column-start property.

.item:nth-of-type(2) {
  grid-row-start: span 2;
}

We use span and grid-row-start to specify that we want to occupy both slots.

As you can see above, we have been able to build very complex layouts using a handful of CSS grid properties.

Effective use of grid-templates

Now coming to grid-templates , in this section we will discuss how to create different layouts for different screen sizes.

First of all, let's start with a dom structure:

<div class="container">
  <header>header</header>
  <aside>Left</aside>
  <section>Section</section>
  <aside>Right</aside>
  <footer>Footer</footer>
</div>

Next, add some styles:

``
.container {
display: grid;
height: 100vh;
grid-gap: 10px;
}

.container > * {
background: coral;
display: flex;
justify-content: center;
align-items: center;
}`
``

We add a background color to the element. As you can see from the code above, we also used the flex attribute. We can combine flex and grid together. In this particular example, we center-align the content using the flex attribute.

For mobile, we want section to be below header and right to be below section , which we can do using grid areas. First, we define the grid area:

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-areas: 
   "header"
    "section"
    "right"
    "left"
    "footer"
}

aside:nth-of-type(1) {
  grid-area: left;
}

aside:nth-of-type(2) {
  grid-area: right;
}

section {
  grid-area: section;
}

footer {
  grid-area: footer;
}

header {
  grid-area: header;
}

As you can see in grid-template-areas , we first have header , then section , then right , and finally left . Also, we want our section to be a bit bigger than left and right . To achieve this, we can use the rid-template-rows attribute?

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-areas: 
    "header"
    "section"
    "right"
    "left"
    "footer";
  grid-template-rows: 1fr 6fr 2fr 2fr 1fr;
}

one picture missing

We can set the view on the mobile side as needed, and then we use media queries to adapt to the big screen:

@media (min-width: 500px)  {
  .container {
    grid-template-areas: 
      "header header  header"
      "left   section right"
      "footer footer  right";
    grid-template-rows: 1fr 6fr 1fr;
    grid-template-columns: 1fr 6fr 1fr;
  }
}

How to dynamically track the size of an element using the minmax function

Let's say we have two columns that evenly occupy the available space on the screen. We can do this easily by using grid-template-columns . But what if we want one of them to be between 200px and 500px ? Our columns can adapt to different screen sizes, but one of them will never be larger than 500px or smaller than 200px .

For these types of scenarios, we use the minmax function. Let's see it in action.

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
</div>

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: minmax(200px, 500px) minmax(100px, auto);
}
.one {
  background: cyan;
}
.two {
  background: pink;
}

In this example, the first column is always between 200px and 500px . However, the minimum value for the second column can be 100px , which for larger screens will cover the rest of the screen.

How to use the repeat function?

Let's talk about repeating patterns in elements. How do we handle them? We can repeat our code or use javascript. However, there is another way to do it with css. repeat function represents a repeating segment of a track list, allowing a larger number of columns or rows that display repeating patterns to be written in a more compact form.

<div id="container">
  <div>
    This item is 50 pixels wide.
  </div>
  <div>
    Item with flexible width.
  </div>
  <div>
    This item is 50 pixels wide.
  </div>
  <div>
    Item with flexible width.
  </div>
  <div>
    Inflexible item of 100 pixels width.
  </div>
</div>

#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

Nested grid

I can also nest the grid within another grid, let's see how to achieve this:

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item inner-grid">
    <div class="item">i</div>
    <div class="item">ii</div>
    <div class="item">iii</div>
    <div class="item">iv</div>
    <div class="item">v</div>
    <div class="item">vi</div>
  </div>
  <div class="item">Five</div>
  <div class="item">Six</div>
</div>

We start by declaring the grid on the outer container :

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, auto))
}

Note that we have a repeat function in the grid template and combine it with a minmax function. We can now also apply grid properties to inner grids.

.inner-grid {
  display: grid;
  background: white;
  height: 100%;
  grid-gap: 5px;
  grid-template-columns: repeat(3, auto);
}

This way, we have a grid nested within our grid.

I will share it with you today, thank you for watching, and see you next time!

---

The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool Fundebug .

Original: https://blog.soshace.com/how-to-build-complex-layouts-with-css-grid/

comminicate

If you have dreams and dry goods, search [Moving the World] attention to this Shawanzhi who is still washing dishes in the early morning.

This article has been included in GitHub https://github.com/qq449245884/xiaozhi . There are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.