Five minutes to teach you CSS Grid layout

CSS in front-end development, grid layout is the foundation of Web site design, CSS Grid is the most powerful and simplest tool to create grid layout. We mainly five minutes to teach you to learn CSS Grid layout method, hope to help everyone.

CSS Grid has also received native support for the mainstream browser (Safari,chrome,firefox,edge) this year, so I'm sure all front-end developers will have to learn this technology in the near future.

In this article, I'll cover the basics of CSS grids as quickly as possible. I will ignore everything you should not care about, just to let you know the most basic knowledge.

Your first Grid layout

The CSS Grid layout consists of two core components, wrapper (parent element) and items (child elements). Wrapper is the actual grid (grid), items is the content within the grid (GRID).

Here is an wrapper element with 6 items inside:

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

To turn the wrapper element into a grid (grid), simply set its display property to Grid:

. wrapper {    Display:grid;}

However, this has not done anything because we do not define what grid (GRID) we want to be. It will simply stack 6 p together.

I've added some styles, but this has nothing to do with CSS Grid.

Columns (columns) and rows (rows)

To make it a two-dimensional grid container, we need to define columns and rows. Let's create 3 columns and 2 rows. We will use the Grid-template-row and Grid-template-column properties.

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

As you can see, we write 3 values for Grid-template-columns so that we get 3 columns. We want to get 2 rows, so we've specified 2 values for grid-template-rows.

These values determine how wide we want our columns to be (100px), and how high we want the rows to be (50px). The results are as follows:

To make sure you understand the relationship between these values and the grid appearance correctly, take a look at this example.

. wrapper {    Display:grid;    grid-template-columns:200px 50px 100px;    grid-template-rows:100px 30px;}

Try to understand the above code and think about what layout the above code will produce.

This is the result of the layout of the above code:

Very well understood and very simple to use, isn't it? Let's add a little bit more difficulty.

Place items (child elements)

The next thing you need to learn is how to place items (child elements) on a grid (grid). In particular, this is where Grid layout capabilities are manifested, because it makes it very easy to create layouts.

We used the same HTML markup as before, and to help us understand better, we added a separate class to each items (child element):

<p class= "wrapper" >  <p class= "item1" >1</p>  <p class= "item2" >2</p>  <p class= "Item3" >3</p>  <p class= "item4" >4</p>  <p class= "ITEM5" >5</p>  <p class= "Item6" >6</p></p>

Now, let's create a 3x3 grid (GRID):

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

You will get the following layout:

I don't know if you found out, we only see the 3x2 grid (grid) on the page, and we define a 3x3 grid (GRID). This is because we only have 6 items (child elements) to fill this grid. If we add 3 items (child elements), the last line will be filled.

To locate and adjust the items (child elements) size, we will use the Grid-column and Grid-row properties to set:

. item1 {    grid-column-start:1;    Grid-column-end:4;}

What we're going to do here is we want the item1 to occupy the beginning of the first grid line and end with the fourth grid line. In other words, it will occupy the entire line independently. The following is what is displayed on the screen:

If you don't understand that we set only 3 columns, why are there 4 grid floss? Take a look at the image below and I draw a black column grid line:

Notice that we are now working with all the rows in the grid. When we take the first items (child elements) to occupy the first line, it pushes the rest of the items (the child elements) to the next one.

Finally, let's give you a simpler way to write the syntax above:

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

To make sure that you understand the concept correctly, we rearrange the other items (child elements).

. item1 {    grid-column-start:1;    Grid-column-end:3;}. item3 {    grid-row-start:2;    Grid-row-end:4;}. item4 {    grid-column-start:2;    Grid-column-end:4;}

You can try to put the layout effect of the above code in your mind, it should not be difficult.

The following are the layout effects on the page:

The above content is five minutes to teach you to learn CSS Grid layout, hope to help everyone.