Photo by Kevin Bhagat on Unsplash
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.