Introduction to Grid in CSS:

At this point, we’ve covered a great deal of different ways to manipulate the grid and the items inside it to create interesting layouts.

  • grid-template-columns defines the number and sizes of the columns of the grid
  • grid-template-rows defines the number and sizes of the rows of the grid
  • grid-template is a shorthand for defining both grid-template-columns and grid-template-rows in one line
  • row-gap puts blank space between the rows of the grid
  • column-gap puts blank space between the columns of the grid
  • gap is a shorthand for defining both row-gap and column-gap in one line
  • grid-row-start and grid-row-end makes elements span certain rows of the grid
  • grid-column-start and grid-column-end makes elements span certain columns of the grid
  • grid-area is a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end, all in one line

You have seen how to set up and fill in a grid and you now have one more CSS positioning technique to add to your toolkit! Let’s do some practice to solidify these skills.

HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel='stylesheet' href='style.css'></head>
  
<body>
  <div class="grid">
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e">E</div>
  </div>
</body>

</html>

CSS:

.grid {
  border: 2px blue solid;
  height: 500px;
  width: 500px;
  display: grid;
  grid-template: repeat(2, 200px) / 25% 25% 2fr 1fr;
  gap: 10px 15px;
}

.box {
  background-color: beige;
  color: black;
  border-radius: 5px;
  border: 2px dodgerblue solid;
}

.a{
grid-area: 1 / span 2/ 1 / 3;
}