CSS Grid : Everything you need to know

CSS Grid is a powerful tool that CSS gives us to easily align items and create two-dimensional layouts.

• Grid and Flexbox are both part of CSS and can both be used in similar ways
• Flexbox was created first and has a bit more browser compatibility
• I would recommend to learn both, It will make your life easier to design layouts.

Let me tell you how I use Flexbox and Grid in my projects just to give you idea:

I use Grid to layout my website for example Header, Footer, Cards, Services etc.

And for inner items of each section I use Flexbox to align them.

Now Before diving into the Grid, It’s important to understand it’s terminology.

Grid Container

The element on which display: grid is applied. It’s the direct parent of all the grid items. In this example container is the grid container.

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

Grid Item

The children (i.e. direct descendants) of the grid container. Here the item elements are grid items, but sub-item isn’t.

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

Grid Line

The dividing lines that make up the structure of the grid. They can be either vertical (“column grid lines”) or horizontal (“row grid lines”) and reside on either side of a row or column. Here the yellow line is an example of a column grid line.

Grid Track

The space between two adjacent grid lines. You can think of them as the columns or rows of the grid. Here’s the grid track between the second and third-row grid lines.

Grid Area

The total space surrounded by four grid lines. A grid area may be composed of any number of grid cells. Here’s the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.

Properties for the Parent(Grid Container)

display: grid

Defines the element as a grid container and establishes a new grid formatting context for its contents.

.container {
    display: grid;
}

grid-template-columns & grid-template-rows

Defines the columns and rows of the grid with a space-separated list of values.

Values can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit)

Example:

below grid-template-column property will creates 3 columns: 2nd column will have twice the space of first and 3rd column will have thrice the space of first.

grid-template-rows will set each item to one third the width of the grid container:

.container {
    grid-template-columns: 1fr 2fr 3fr;
    grid-template-rows: 1fr 1fr 1fr;
}

grid-template-areas

Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property. Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell. The syntax itself provides a visualization of the structure of the grid.

Example:

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

row-gap & column-gap

This property specifies the size of grid lines, You can think of it like setting the width of gutters between the columns/rows.

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  column-gap: 10px;
  row-gap: 15px;
}

justify-items & align-items

justify-content:

it aligns items along the row axis(X- Axis):

Values:

• start – aligns the grid to be flush with the start edge of the grid container
• end – aligns the grid to be flush with the end edge of the grid container
• center – aligns the grid in the center of the grid container
• stretch – resizes the grid items to allow the grid to fill the full width of the grid container
• space-around – places an even amount of space between each grid item, with half-sized spaces on the far ends
• space-between – places an even amount of space between each grid item, with no space at the far ends
• space-evenly – places an even amount of space between each grid item, including the far ends

align-content:

it aligns items along the column axis(Y- Axis):

Values:

• start – aligns the grid to be flush with the start edge of the grid container
• end – aligns the grid to be flush with the end edge of the grid container
• center – aligns the grid in the center of the grid container
• stretch – resizes the grid items to allow the grid to fill the full height of the grid container
• space-around – places an even amount of space between each grid item, with half-sized spaces on the far ends
• space-between – places an even amount of space between each grid item, with no space at the far ends
• space-evenly – places an even amount of space between each grid item, including the far ends

##Properties for the Children(Grid Items)

grid-column-start & grid-column-end &

grid-column-start & grid-row-end These properties determines a grid item’s location within the grid.

grid-column-start/grid-row-start is the line where the item begins, and

grid-column-end/grid-row-end is the line where the item ends.

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

justify-self

Aligns a grid item inside a cell along the row axis(x-axis)

Values:

• start – aligns the grid item to be flush with the start edge of the cell
• end – aligns the grid item to be flush with the end edge of the cell
• center – aligns the grid item in the center of the cell

.item {
  justify-self: start | end | center | stretch;
}

align-self

Aligns a grid item inside a cell along the column axis(y-axis)

Values:

• start – aligns the grid item to be flush with the start edge of the cell
• end – aligns the grid item to be flush with the end edge of the cell
• center – aligns the grid item in the center of the cell

.item {
  align-self: start | end | center | stretch;
}

###