4 CSS Grid Properties for your Layout Needs

css-tricks.com css-tricks.com2 months ago in #Dev Love57

CSS Grid provides us with a powerful layout system for websites. The CSS-Tricks guide gives you a comprehensive overview of Grid’s properties with layout examples. What we’re going to do here is a reverse approach to show you the smallest possible set of grid properties you need to know to meet most of your layout needs. These five properties will get you up and running: display (for the grid value) grid-template-columns grid-gap grid-auto-flow grid-column / grid-row Here’s how simple it is. Let’s assume you want to implement the following layout for small, medium and large screens. Small and medium-sized screens Large screen layout This is the markup we’ll be working with: If we apply a few baseline styles, this is what we get, which is already sufficient for small screens: Now we can get into the grid properties! Use display: grid to divide the page into independent layout containers First, we need to determine which parts of the page should be aligned with grid layouts. It is possible to define a single grid layout for the whole page. However, for websites with a very complex structure (e.g. news websites), handling a large grid quickly becomes complicated to wrangle. In this case, I recommend breaking things down into several, independent grid containers. Like this: Where do you draw the line between what is and isn’t a grid? Here’s a personal rule of thumb I follow: If the layout in a particular part of the page does not fit into the grid of an adjacent or surrounding part of the page, make that part its own grid container. I have drawn the grid lines into the page section with the class .container-main in the following image You may notice that the section with the .container-inner class from the markup does not fit exactly into the grid of rows. Here’s another possible layout where the small sections fit into the surrounding grid if a finer line raster is chosen. A separate grid container is not absolutely necessary here. To kick this off, let’s .container-main into a grid container. This is the basic building block for CSS Grid — turning an element into a grid container with the display property: .container-main { display: grid; } We’ll want to do the same with our other grid containers: .container-inner { display: grid; } .container-nav { display: grid; } Use grid-template-columns to define the required columns Next, we’re going to define the number of columns we need in each grid container and how wide those columns should be. My guideline for the number of columns:  use the smallest common multiple of the maximum number of columns required for the different screen sizes. How does that work? The .container-main element has a total of two columns on medium-sized screens. If we take that and multiply it by the number of columns on large screens (three), we get a total of six columns. We can do the same for our navigation, the .container-inner element. There are three columns on medium-sized screens, which we multiple by one column on large screens to get a total of three columns. The .container-nav element provides no number of columns. In this case,  » Read More

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply