A detailed layout of grid grids in CSS

CSS Grid layout allows us to build and control custom meshes more flexibly than ever before. Grid layout enables us to divide a Web page into rows and columns with simple properties. It also allows us to use CSS to position and adjust every element in the grid without changing any HTML. It allows HTML to be purely a container for content. HTML structures are no longer constrained by styling, such as not nesting multiple times to implement a layout, which can now be done with CSS.

Define a Grid

The Grid module display provides a new value for the property: grid . When you set the attribute of any element display to grid a grid container (Grid container), all its immediate child elements become grid items (grid item).

Let's create a 3x3 layout and make a tic-tac-toe (Tic-Tac-Tac-play) chessboard.

First, we'll write some HTML:

    <p class= "Game-board" >      <p class= "box" ></p>      <p class= "box" ></p>      <p class= "box" ></p>      <p class= "box" ></p>      <p class= "box" ></p>      <p class = "box" ></p>      <p class= "box" ></p>      <p class= "box" ></p>      <p class= "box "></p>    </p>

As you can see, .game-board p is a grid container, and .box p is a grid item. Now we'll implement the 3x3 layout through the Grid layout.

    . Game-board     {        display:grid;        grid-template-rows:200px 200px 200px;        grid-template-columns:200px 200px 200px;    }

I've also used the other two properties here.

grid-template-rows Property allows us to specify the number of rows in the grid and the height of the rows. Then you should guess what the other attribute is.

grid-template-columns Property allows us to specify the number of columns in the grid and the width of the columns. You can specify the size of any unit, including pixels, percentages, and other units fr that we will learn in the next step.

Fr Units (equal portions)

fris a new unit defined for the grid layout. It can help you get rid of the calculated percentages and divide the available space equally.

For example, if you set this rule in a grid container grid-template-rows: 2fr 3fr : Then your grid container will first be divided into 2 rows. The numbers are then added together, where the sum is 5, which is 5 equal portions.

That is, we will have 2 rows: The first row occupies 2/5 of the vertical space. The second row accounts for 3/5 of the vertical space.

Back to our Tic-Tac-Toe example, we used fr instead px . What we want is that there should be 3 rows and 3 columns. So, we just need to 1fr replace 3 with 3 200px :

    . Game-board     {        display:grid;        GRID-TEMPLATE-ROWS:1FR 1FR 1fr;        GRID-TEMPLATE-COLUMNS:1FR 1fr 1fr;    }

In particular, it is important to note that the fr units are equal to the available space, or the remaining space. Look at an example.

    . Game-board     {        grid-gap:2px;        Display:grid;        width:300px;        height:200px;        grid-template-rows:100px 1FR 1fr;        GRID-TEMPLATE-COLUMNS:1FR 50px 1fr;    }

Layout effect

You will see that the fr unit is the total size minus the cell size after the explicit dimensions in the remaining space. grid-gapis the interval.

Repeat () function

In some cases, we may have a lot of columns and rows. It grid-template can be tedious to specify each value in a property. Fortunately, there is a repeat function that repeats as many times as any one loop outputs a given value. It has two parameters. The first is the number of iterations, and the second is the value to repeat. We use repeat the function to rewrite the example above.

    . Game-board    {        display:grid;        Grid-template-rows:repeat (3, 1FR);        Grid-template-columns:repeat (3, 1FR);    }

Equivalent to:

    . Game-board     {        display:grid;        GRID-TEMPLATE-ROWS:1FR 1FR 1fr;        GRID-TEMPLATE-COLUMNS:1FR 1fr 1fr;    }

Grid-template Property

property is grid-template-rows the shorthand syntax for the and grid-template-columns . grid-template This is its syntax: grid-template:rows/columns;

Our example above uses this shorthand syntax and looks very neat.

    . Game-board    {        display:grid;        Grid-template:repeat (3, 1FR)/Repeat (3, 1FR);    }

Look, you can create a 3x3 grid using a grid layout with just 2 lines of code.

Example:

Html

<p class= "Game-board" >  <p class= "box" >X</p>  <p class= "box" >O</p>  <p class= "box" >O</p>  <p class= "box" >O</p>  <p class= "box" >X</p>  <p class= "box" >O</p>  <p class= "box" >O</p>  <p class= "box" >X</p>  <p class= "box" >X</p></p>

Css

. game-board{    width:600px;    height:600px;    margin:0 Auto;  Background-color: #34495e;  Color: #fff;  BORDER:6PX solid #2c3e50;  border-radius:10px;        Display:grid;    Grid-template:repeat (3, 1FR)/Repeat (3, 1FR);}. box{  border:6px solid #2c3e50;  border-radius:2px;  Font-family:helvetica;  Font-weight:bold;  Font-size:4em;  Display:flex;  Justify-content:center;  Align-items:center;}

Gridline number, grid cell, grid track

Gridlines are lines that exist on each side of columns and rows. A set of vertical lines divides the space vertically into columns, while the other sets the horizontal line of space into rows. This means that in our previous example, there are four vertical lines and four horizontal lines that contain the rows and columns between them.

Gridlines become useful when you span grid items from one location to another.

The grid track is the space between two lines. A grid track can be one row or column.

A grid cell is much like a table cell, which is the space between two adjacent vertical lines and two adjacent horizontal lines. This is the smallest unit in the grid.

Positioning grid Items

I took the previous example of the grid and tagged each cell with numbers from 1 to 9 instead of X or O, and here's what it looks like:

Suppose I want to move the 6th box to the position of the 2nd box. Without the CSS grid, without changing the HTML, this is almost an impossible task, at least for me. But if we use grid modules, it's a breeze to change the position of grid items in the grid. To move the 6th box to the position of the 2nd box, we must know exactly where the 2nd box is. With the help of the grid number, we can easily find this position. The second box is located after the 2nd column grid line, and the 3rd column grid line is below the 1th row grid, and the 2nd row is above the grid line. Now we can assign these gridline numbers to the 6th box using the following properties:

1. Grid-column-start

2. Grid-column-end

3. Grid-row-start

4. Grid-row-end

The first two properties correspond to vertical gridlines, that is, the start and end of the column gridlines. The last two attributes are horizontal gridlines, which are the start and end of the line grid lines. Let's assign the correct grid line number to move the 6th box.

    . Box:nth-child (6)    {        grid-row-start:1;        Grid-row-end:2;        Grid-column-start:2;        Grid-column-end:3;    }

There are also two shorthand properties for setting the start and end grid lines of rows and columns together.

    . Box:nth-child (6)    {        grid-row:1/2;        Grid-column:2/3;    }

In addition, there is grid-area a property that is a shorthand attribute for all four of the above attributes. It takes values in the following order: Grid-area: <row-start>/<column-start>/<row-end>/<column-end>;

Now our example can be written like this

    . Box:nth-child (6)    {        grid-area:1/2/2/3;    }

The above line of code can also be further reduced. As you can see, this box occupies only one row and a column, so we only need to specify the row and column starting line, without ending the line value

    . Box:nth-child (6)    {        grid-area:1/2;    }

What if we want the 6th box to span a two-box area? This is easy column-end to do by adding a value of 1.

    . Box:nth-child (6)    {        grid-area:1/2/2/4;    }

You can also use span keywords and the number of tracks you occupy to replace the grid-row-end specified grid-column-end and end gridline numbers. In this case, the 6th box is spanned by 2 columns and 1 rows.

    . Box:nth-child (6)    {        grid-area:1/2/2/span 2;    }

Grid region naming

Properties can also be used to name a section of the grid, and then we grid-template-areas can use properties to locate it. grid-area Let's create a simple bread-and-butter layout with a top, nav, main and aside in the middle, and footer below. This is the required HTML:

    <p class= "Container" >      
We need to use grid-area attributes to name each region:



    Header    {      grid-area:header;      Background-color: #9b59b6;    }         Nav    {      grid-area:nav;      Background-color: #3498db;    }         Main    {      grid-area:main;      Background-color: #2ecc71;    }         Aside    {      grid-area:aside;      Background-color: #f1c40f;    }         Footer    {      grid-area:footer;      Background-color: #1abc9c;    }
Now we'll use  grid-template-areas  properties to specify the rows and columns that each grid area occupies. Here's how we do it:



    . container    {          display:grid;          GRID-TEMPLATE-ROWS:1FR 5FR 1fr;          GRID-TEMPLATE-COLUMNS:2FR 5FR 3fr;          Grid-template-areas: "Header header header  "            "nav     main    aside"            "footer  Footer  Footer ";          Grid-gap:. 75em;    }
Please note that the header and footer words are repeated three times. This indicates that the header and footer span the width of the 3 columns. You can write it all in one line, but write each line on a separate line very well, very clean. You can see that I have used a new property here grid-gap . All it does is add a space between the two grid areas. You can also use  grid-row-gap  and  grid-column-gap  to specify different spacing values for rows and columns.

Example:

Html



<p class= "Container" >  
Css



. container{  Display:grid;  GRID-TEMPLATE-ROWS:1FR 5FR 1fr;  GRID-TEMPLATE-COLUMNS:2FR 5FR 3fr;  Grid-template-areas: "Header header header    "    "nav    main   aside"    "footer footer footer";  Grid-gap:. 75em;  Background-color: #eee;  WIDTH:100VW;  HEIGHT:100VH;} header{  Grid-area:header;  Background-color: #9b59b6;} nav{  Grid-area:nav;  Background-color: #3498db;} main{  Grid-area:main;  Background-color: #2ecc71;} aside{  grid-area:aside;  Background-color: #f1c40f;} footer{  Grid-area:footer;  Background-color: #1abc9c;}

Conclusion

CSS grid layouts allow us to layout more quickly and to be more manageable. In this tutorial, we learned how to use CSS grids to define layouts, fr units, repeat functions, and specific terminology in some grid systems. We also learned how to position grid items within a grid container using grid lines and grid named ranges.