CSS Grid Basics: Creating a complex layout with ease

Before the grid, we used different CSS properties, such as floats, tables, and positioning, to create a webpage layout. CSS-Grid, a two-dimensional system that helps create web layouts, provided the solution to tackle the layout problems. Flexbox, which is one-directional, also helps with the layout.

CSS Grid can assist you build beautiful websites like these https://lynnandtonic.com/work/.

CSS Grid Basics:

When using the grid, you define the container element as a grid and then place it in child elements.

To understand the grid, first, let’s understand its terminology:

Grid container:

It’s the parent element on which the display: grid is applied.

For example:

  <div class="container">
        <div class="box box-1">1</div>
        <div class="box box-2">2</div>
        <div class="box box-3">3</div>       
    </div>

.container{
display : grid;
}

Imagine the container as a shelf of books. Books from multiple subjects are kept on this shelf. When the shelf is converted into a grid, it becomes the grid container, and all the books become Grid items. The shelf is divided into rows and columns.

Grid Item:

 <div class="container">
        <div class="box box-1">1</div>
        <div class="box box-2">
            <p class="sub-box">Sub Box<p>
        </div>
        <div class="box box-3">3</div>        
    </div>

The direct child, i.e. the box elements are the grid child but the sub-box elements are not.

From the bookshelf example above, the books are the direct child but any bookmark or anything else kept inside the book is not the direct child.

Grid Line:

The vertical and horizontal lines that make up the grid. These are the dividing lines that make up the grid. The vertical lines are the columns and the horizontal lines are the rows.

Grid Cell:

Let’s say there is a space to keep a particular subject’s book. That particular space is the grid-cell of the grid. It’s a single unit of the grid.

Grid Track:

The space between two adjacent grid lines. You can think of them as the columns or rows of the grid.

Grid Area:

Four grid lines surround the total place. A grid area may be composed of any number of grid cells.

Grid Properties:

Let’s look at the properties of grid container i.e. the parent and grid items i.e. the child.

Properties of the Parent:

Display: It defines the container as the grid and new formatting rules are established for the elements.
```
 .container{
 display:grid
 }
```
Grid-lines:

Grid lines are automatically assigned positive numbers from these assignments (-1 being an alternate for the very last row).
grid-template-rows and grid-template-columns: A row and column track is created with a separate list of values. These values can be percentages, pixels, or fr unit(fraction of free space). They represent the track size of rows and columns. Below, four rows and columns are created inside a grid. You can see different to write values.
```
 .box{
 grid-template-columns: 100px 100px 100px 100px;
 grid-template-columns: 1fr 2fr 3fr 1fr;
 grid-template-columns: repeat(5,300px);

 grid-template-rows: 100px 100px 100px 100px;
 grid-template-rows: 1fr 2fr 3fr 1fr;
 grid-template-rows: repeat(5,300px);
 }
```
Naming Grid lines:

Grid lines can be named when defining the grid with the grid-template-rows and grid-template-columns properties. Line names can then be referenced to position grid items.
```
 grid-template-rows:    [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
 grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];
```
Assign names to grid lines when defining your grid with the grid-template-rows and grid-template-columns properties.

In line names, avoid keywords that appear in the specification (e.g. span) to not confuse.

Assigned line names must be wrapped in square brackets [name-of-line] and placed relative to the grid tracks.

grid-template: It is a shorthand for setting grid-template-rows, grid-template-columns, and grid-areas in a single line.

 .box{
 grid-template:repeat(4, 100px) / repeat(4 ,120px);
 }
 This sets grid-template-rows and grid-template-columns respectively.

grid-template-areas: Imagine a whole grid-template referenced by different names of respective areas. To fill the grid cells you have to span the area’s name in the child elements.

 .container{
 grid-template-areas: display: grid;
   grid-template-columns: 50px 50px 50px 50px;
   grid-template-rows: auto;
   grid-template-areas: 
     'purple'
     'orange'
     'blue'
     'green'
     'magenta';
 }

Gap: It sets the width between the rows and columns. Think of it as spaces between the books on the shelf in different columns and rows.

This property can be used just for rows or columns and also for both of them combined.
```
 .container {
   grid-template-columns: 50px 50px 50px;
   grid-template-rows: 50px 50px 50px; 
   column-gap: 10px;    
   row-gap: 15px;
   "shorthand" 
   "gap: 15px / 10px";
 }
```

Spanning child elements across the grid( Properties of child elements):

The grid’s location is determined by:

grid-column-start/end, grid-row-start/end.

 .box{ 
 grid-row-start: 2; 
 grid-column-start: 2; 
 grid-column-end: 4;
 grid-row-end: 4;
 grid-column-start: 4; 

 grid-column-start: span 2;
 }

the short-hand value is :

 .box{
 grid-column: 3/5;
 grid-row: 2/4; 
 }

To fill the grid area of child elements which in this case is the books placed on the shelf, following properties are used:

 .box-1{
 grid-area:orange;
 }
 .box-2{
     background-color: #FF6161;
     grid-area: orange;
 }
 .box-3{
     background-color: #505CCA;
     grid-area: blue;
 }

Aligning grid items

CSS box module complements CSS grid to align the items inside the grid along the row and column axis.

Justify-items and align-items are applied to the grid container to position the child elements in the grid container.

.box{
justify-items: start;
justify-items: end;
justify-items: centre;
justify-items: stretch;
}

.box{
align-items: start;
align-items: end;
align-items: centre;
align-items: stretch;

.box{
justify-items: centre;
align-items: centre;
}

Individual items can be self-aligned with the align-self and justify-self properties. These properties support the following values:

Justify-self aligns individual items along the row axis.

.item-1 { justify-self: start }
.item-2 { justify-self: center }
.item-3 { justify-self: end }

Align-self aligns items along the column axis.

      .item-1 { align-self: start }
      .item-2 { align-self: center }
      .item-3 { align-self: end }

3. Item 1 is positioned at the center of the row and column axes.

.item-1 {
  justify-self: center
  align-self:   center
}

Aligning Grid Tracks

Justify-content: start, aligns column tracks along and at the start of the row axis—it is the default value.

.grid {
  grid-template-columns: repeat(2, 45px);
  grid-template-rows: repeat(2, 45px);
  grid-gap: 0.5em;
  justify-content: start;
}

Columns are aligned at the end of the row axis.

justify-content: end;

Columns are aligned at the center of the row axis.

justify-content: center;

The remaining space of the grid container is distributed and applied to the start and end of each column track.

justify-content: space-around;

The remaining space is distributed between the column tracks.

justify-content: space-between;

The remaining space is distributed where the space between the columns are equal to the space at the start and end of the row track.

justify-content: space-evenly;

Start aligns rows at the start of the column axis and is the default value.

align-content: start;

Rows are aligned at the end of the column axis.

align-content: end;

Rows are aligned at the center of the column axis.

align-content: center;

The remaining space of the grid container is distributed and applied to the start and end of each row track.

align-content: space-around;

The remaining space is distributed between the row tracks.

align-content: space-between;

The remaining space is distributed where the space between the rows are equal to the space at the start and end of the column track.

align-content: space-evenly;