CSS Grid

 CSS Grid

CSS Grid is a new layout system in CSS that allows you to create complex layouts with ease. It uses a grid of rows and columns to arrange and align content. Here's an example:

.container {

  display: grid;

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

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

  gap: 20px;

}

.item {

  background-color: #eee;

  padding: 20px;

  text-align: center;

}

In this code, we first define a grid container with the display: grid property. We then set the number of columns and rows with the grid-template-columns and grid-template-rows properties. In this example, we have three columns and two rows. We also set the gap between the items with the gap property.

Next, we define the styles for the items inside the grid container. In this example, we set the background color, padding, and text alignment.