Adaptive CSS raster: The final version of free layout | Technical Review

• Responsive CSS Grid: The Ultimate Layout Freedom
• Christine Vallaure
• The Nuggets translation Project
• Permanent link to this article: github.com/xitu/gold-m…
• Translator: Hoarfroster
• Proofread by: Zenblo, Chorer, Lsvih

CSS Grid layout (Grid) is a new way to create two-dimensional layouts on the Web. With just a few lines of CSS, we can create a raster layout that was previously impossible without JavaScript. We don’t need any plug-ins or complicated installation steps, we don’t need tedious additional files, and we don’t need to be limited to a 12-column grid layout.

What grids can we use?

In short: we can actually use almost any grid layout we can think of, and not limited to that. We are free to choose different grid sizes, sizes and positions. You can find an overview of the most common marked grids in the grid example.

Let’s start by building the sample HTML tags!

A div element with the class name Container holds five child div elements, or items (of course, there can be more or less than five). If you like, you can start with the HTML and CSS markup code in CodePen.

<div class="container">
    <div class="item color-1">item-1</div>
    <div class="item color-2">item-2</div>
    <div class="item color-3">item-3</div>
    <div class="item color-4">item-4</div>
    <div class="item color-5">item-5</div>
</div>
Copy the code

Basic: Sets grids and columns in CSS

In CSS, we can use the display: grid definition to turn elements of the.container class into a raster layout. Using grid-template-columns, we partition the required columns (in this case, we will partition 5 columns, each set to 250px). By using grid-template-rows, we can set the height of the row (if necessary), in this case 150px. With that done, we have our first grid layout!

.container {
    display: grid;
    grid-template-columns: 250px 250px 250px 250px 250px;
    grid-template-rows: 150px;
}

/* abbreviate: grid-template-columns: repeat(5, 250px); * / 
Copy the code

Set the interval

We can use grip-gap to set the spacing between each item, and column-gap and row-gap to set the horizontal and vertical spacing, respectively. Incidentally, we can use all generic units, such as px for fixed intervals or % for adaptive intervals.

.container {
    display: grid;
    grid-template-columns: repeat(5.250px);
    grid-template-rows: 150px;
    grid-gap: 30px;
}
Copy the code

Note: Chrome 91, Safari 14.0.2, Firefox 86.0 A1 did not have this phenomenon

usefrAutomatically fill the remaining space

This is every designer’s dream! We can use Fractional Units, or FR, to allocate the available space as we wish! For example, here we divide the screen space into six parts. The first column occupies 1/6 of the space = 1FR, the second column 3/6 = 3FR, and the third column 2/6 = 2FR. Of course, we can also add grid-Gap as needed.

.container {
    display: grid;
    grid-template-columns: 1fr 3fr 2fr;
}
Copy the code

All rows are now adaptive!

A mixture ofpx 和 frBuild adaptive and fixed columns

The simultaneous use of PX and FR on demand allows the grid to fit into the available space, which is very useful!

.container {
    display: grid;
    grid-template-columns: 300px 3fr 2fr;
}
Copy the code

Absolute freedom in order

The best part is that in the grid, we can set the size of each item. We can use grid-column-start to set the starting point and grid-column-end to set the ending point, or grid-column: startpoint/endpoint. :

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

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

.item-5 {
    grid-column: 3 / 4;
}
Copy the code

Don’t be fooled by the grid lines, they are always at the beginning of the first item!

The same applies to vertical or full area distribution!

CSS Grids shine in this respect, showing an advantage over Bootstrap and Co — with grid-Row, each item can be defined in any position and width. As we’ll see in the next example, this is definitely advantageous for adapting to different screen sizes and devices:

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

.item-2 {
    grid-row: 1 / 3;
}

.item-1 {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
}
Copy the code

Want to accommodate different screen sizes and devices? B: Sure!

CSS Grids also have a distinct advantage over regular grids. Depending on the screen size, we can not only switch from adaptive to fixed values through media queries, but also adjust the location of the entire project!

.container {
    display: grid;
    grid-template-columns: 250px 3fr 2fr;
}

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

.item-2 {
    grid-row: 2 / 4;
}

@media only screen and (max-width: 720px) {
    .container {
        grid-template-columns: 1fr 1fr;
    }

    .item-1 {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }

    .item-2 {
        grid-row: 1 / 1; }}Copy the code

Browser support

All modern browsers (Safari, Chrome, Firefox, Edge) now natively support CSS Grid. With a global approval rating of 87.85%, CSS Grid has emerged as an alternative to Boostrap and Co.

A practical example of CSS grids

• Christinevallaure.com, UX/UI Design
• Moonlearning. IO, UX/UI online course
• Slack, the corporate website
• Medium, where the original was published
• Skyler Hughes, photography website
• Max Bock, front-end developer website
• Design+Code, Web designer site
• Hi Agency, Deck, template page

Before you start using the Grid

I think you might also enjoy some of the other articles and courses I’ve posted on Moonlearning. IO or the full Design Transition to Development course (more information on how to use Grid!). .

• This article is participating in the “Nuggets 2021 Spring Recruitment Campaign”, click to see the details of the campaign

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.