rows and columns in CSS grid, you need to use the grid-template-columns and grid-template-rows properties.

rows and columns in CSS grid

To define rows and columns in CSS grid, you need to use the grid-template-columns and grid-template-rows properties.

Here is an example of how to define a grid with a 3x3 layout:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
}

In the code snippet above, we have created a grid container with display: grid. We have also specified the grid-template-columns property with the value 1fr 1fr 1fr, which creates three columns of equal width. We've also set grid-template-rows to 100px 100px 100px, which creates three rows with a fixed height of 100 pixels.

You can also use other types of units, such as percentages or pixels, to define your grid columns and rows. Here is an example:

.grid-container {
  display: grid;
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: 150px 1fr 100px;
}

In this example, the grid-template-columns property is set to 25% 50% 25%, which creates three columns where the first and third columns are 25% wide and the middle column is 50% wide. The grid-template-rows property is set to 150px 1fr 100px, which creates three rows where the first and last rows are fixed at 150 pixels and 100 pixels respectively, while the middle row takes up the remaining vertical space (specified as 1fr).

Overall, using the grid-template-columns and grid-template-rows properties allows you to define a flexible and responsive grid layout that can adapt to different screen sizes and content needs.

Did you find this article valuable?

Support ManvenderaPathak blog by becoming a sponsor. Any amount is appreciated!