Grid in CSS3

 Grid in CSS3

CSS Grid is another layout model that allows you to create two-dimensional grid layouts. It provides a more powerful and flexible way to create complex layouts compared to Flexbox.

html

<div class="container">

  <div class="box">Box 1</div>

  <div class="box">Box 2</div>

  <div class="box">Box 3</div>

  <div class="box">Box 4</div>

  <div class="box">Box 5</div>

  <div class="box">Box 6</div>

</div>

css

.container {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: repeat(2, 1fr);

  gap: 10px;

}

.box {

  background-color: blue;

  color: white;

  display: flex;

  justify-content: center;

  align-items: center;

}

In this example, we have created a container with six boxes inside. We have used the grid-template-columns property to specify that the container should have three columns of equal width, and the grid-template-rows property to specify that it should have two rows of equal height. We have also set a gap of 10 pixels between the boxes.