Grid layouts are fundamental to the pattern of websites, and the CSS Grid module is the most powerful and easiest tool for creating it. I personally call back it’due south a lot better than for example Bootstrap (read why here).

The module has also gotten native support by the major browsers (Safari, Chrome, Firefox, Edge), so I believe that all front-stop programmer will have to learn this technology in the
not too distant
future.

In this article, I’ll take you through the very basics of CSS Grid as quickly every bit possible. I’ll be leaving out everything you shouldn’t care nigh until you’ve understood the nuts.

I’ve likewise created a complimentary CSS Grid course. Click hither to get full access to
it.

1*T8nvKEYxNZq0UhpF-bsmEA

Alternatively, cheque out this article, which explains what you’ll learn throughout the class:

Now let’southward jump into it!

Your first grid layout

The ii core ingredients of a CSS Filigree are the
wrapper
(parent) and the
items
(children). The wrapper is the actual grid and the items are the content inside the grid.

Here’south the markup for a wrapper with six items in it:

              <div class="wrapper">   <div>1</div>   <div>2</div>   <div>3</div>   <div>4</div>   <div>5</div>   <div>6</div> </div>
              
            

To turn our wrapper
div
into a
filigree, we simply give it a display of
filigree:

But, this doesn’t do anything nonetheless, as we haven’t defined how we want our grid to look similar. It’ll simply stack 6
div'son tiptop of each other.

1*vTY7C5FMIp8OLkjrgp-vBg

I’ve added a bit of styling, but that hasn’t got annihilation to exercise with CSS filigree.

Columns and rows

To make it ii-dimensional, we’ll need to ascertain the columns and rows.Let’s create three columns and 2 rows. We’ll utilise the
filigree-template-row
and
grid-template-cavalcade
properties.

Popular:   Learn Chinese Language Online for Beginners

As we’ve written three values for
grid-template-columns, we’ll get three columns. We’ll get two rows, as we’ve specified two values for the
grid-template-rows.

The values dictate how wide we desire our columns to be (100px) and how tall we’d want our rows to exist (50px). Here’s the outcome:

1*fJNIdDiScjhI9CZjdxv3Eg

To make sure you properly understand the relation betwixt the values and how the filigree looks, have a wait at this example every bit well.

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

Try to grasp the connection betwixt the lawmaking and the layout.

Here’south how information technology plays out:

1*M9WbiVEFcseUCW6qeG4lSQ

Placing the items

The next thing you’ll need to learn is how to place items on the grid. This is where you go superpowers, as it makes information technology dead uncomplicated to create layouts.

Let’s create a 3×3 grid, using the same markup as before.

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

This will result in the post-obit layout:

1*M9WbiVEFcseUCW6qeG4lSQ

Discover, we only meet a 3×2 grid on the page, while we defined it as a 3×3 grid. That’s considering nosotros only have six items to fill up the grid with. If we had three more, and so the everyman row would be filled too.

To position and resize the items nosotros’ll target them and use the
filigree-column
and
grid-row
backdrop:

              .item1 {     filigree-column-start: one;     filigree-column-end: iv; }
              
            

What we’re saying here is that we want item1 to get-go on the first grid line and end on the quaternary column line. In other words, it’ll take upward the entire row.

Popular:   How to Learn Anything You Want

Here’s how that’ll play out on the screen:

1*he7CoAzdQB3sei_WpHOtNg

Are you confused why we take 4 column lines when nosotros but have three columns? Accept a look at this image, where I’ve drawn the column lines in black:

1*l-adYpQCGve7W6DWY949pw

Discover that we’re at present using all the rows in the grid. When nosotros made the first item accept upwardly the entire first row, information technology pushed the rest of the items downwardly.

Finally, I’d like to prove a simpler way of writing the syntax above:

To make sure you’ve understood this concept properly, permit’s rearrange the items a piffling fleck.

              .item1 {     filigree-cavalcade-start: 1;     filigree-cavalcade-end: three; }  .item3 {     filigree-row-start: 2;     filigree-row-end: four; }  .item4 {     grid-column-kickoff: 2;     grid-column-end: 4; }
              
            

Hither’s how that looks on the page. Attempt to wrap your caput around why it looks like it does. It shouldn’t be as well hard.

1*QDSybpxjXSat6UtoHgUapQ

And that was it!


Cheers for reading! My name is Per Borgen, I’m the co-founder of Scrimba – the easiest way to learn to code. You should bank check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

bootcamp-banner
Click here to become to the avant-garde bootcamp.


Learn to code for free. freeCodeCamp’s open source curriculum has helped more than xl,000 people get jobs as developers. Become started

Source: https://www.freecodecamp.org/news/learn-css-grid-in-5-minutes-f582e87b1228/