Grid Layout in CSS
It offers a grid-based layout system with rows and columns, making it easier to design web pages.
With them, you can divide a page into major regions.
Grid is a layout system in CSS that allows web developers to create complex designs for web pages by organizing content into a grid of rows and columns.
It offers an easy way to divide a page into major regions and create responsive designs.
Implementing Grid
Create a div with the name id grid. And this div, create 9 divs with the class name box.
<div id="grid">
<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 class="box">Box 7</div>
<div class="box">Box 8</div>
<div class="box">Box 9</div>
</div>
The output will be, it just displays Box1, Box2,.........
To make it a box, we can add a border and padding using CSS to this HTML code.
.box {
padding: 10px;
border: 1px solid black;
background-color: gray;
}
The output is:
Different CSS properties for CSS Grids
Here, we are applying Grid. By using attributes, we are defining the grid layout and column size.
#grid {
display: grid;
grid-template-columns: 25% 50% 25%;
}
Here, 1 st column width is 25%, second and third are 50% and 25% respectively.
Here, we use the percentages as 100. We can exceed the 100 such as 50 50 25. Then the grid exceeds the screen. We have to scroll to see the grid.
We can also use a fraction like
#grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
It gives five fractions in which the five boxes are in a single row and the other four in a different row.
if we increase it by 9 fr. then,
Box 1 and Box 6 will take 9 fractions of space and the rest of the boxes are taking 1 fraction.
#grid {
display: grid;
grid-template-columns: 9fr 1fr 1fr 1fr 1fr;
}
Fractions never going to put things out of the screen.Use fractions instead of percentages and pixels.
We also attribute for rows.
#grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 3fr;
}
It will display as two columns and two rows. The first row is of one fraction and the second row is of 3 fractions.
If we want to have, even rows that have longer, then we will repeat. We use repeat when we want to repeat the pattern.
#grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(10, 1fr 3fr)
}
It will repeat ten times(number of times you want to repeat) and 1 fraction for the first row and 3 fractions for the second row.
It displays as:
and it continues for 3 rd and 4 the row and 5 the row.
If we want to have a gap between columns and rows. we also have a property for this.
#grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(10, 1fr 3fr)
grid-column-gap: 10px;
grid-row-gap: 10px;
}
The boxes are displayed as:
We can also gap property instead grid-column-gap and grid-row-gap.It displays the same as it.
#grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(10, 1fr 3fr)
gap:10px;
}
If we want a height for the rows, we can use
#grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap:10px;
grid-auto-rows: 100px;
}
It displays as we have equal heights of boxes.
If we want to keep content on these boxes, then it may not fill as it is only 100px in height.
#grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap:10px;
grid-auto-rows: 100px;
}
We arranged the eight boxes in a row and one box in another row. The content is not able to fit in the first box.
So, We have another property that helps to arrange the text inside the box correctly.
That is minmax where we can keep the limit of minimum and maximum.
#grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap:10px;
grid-auto-rows: minmax(100px,auto);
}
Here we keep a minimum of 100 px and if the content exceeds 100 px, then the maximum is the content it takes by using auto value.
It displays as
Positioning in CSS Grids
As a grid is a two-dimensional layout, we have a row and a column. There is a property in CSS grid-column and grid-row. It takes the value as 1/3 and 2/3 respectively.
Here, 1/3 means the column starts at sky blue 1 and ends at 3. Similarly, 2/3 means it starts at peach 2 and ends at 3.
The grid column and grid row are used to position the grid item inside your grid layout.
Lets, 's design this layout
The HTML code is:
<div id="grid">
<div class="box" id="Box-1">Box 1</div>
<div class="box" id="Box-2">Box 2</div>
<div class="box" id="Box-3">Box 3</div>
<div class="box" id="Box-4">Box 4</div>
<div class="box" id="Box-5">Box 5</div>
<div class="box" id="Box-6">Box 6</div>
</div>
The CSS code is:
<style>
#grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.box {
padding: 10px;
border: 1px solid black;
background-color: gray;
}
#Box-1 {
grid-column: 1/3;
}
#Box-2 {
grid-column: 3/4;
grid-row: 1/3;
}
#Box-3 {
grid-row: 2/3;
}
#Box-4 {
grid-row: 2/4;
}
</style>
By seeing the Number of the box and the rows and column numbers, we can create the layout.
Example:
Box 1 is in the first row and covers two columns. So, it is 1/3 for the grid column as it starts from the first column and ends at the third column.
After completing it, The result is displayed as
Conclusion
With CSS Grid, developers can use attributes to define the grid layout and column size and use fractions instead of percentages and pixels to avoid putting things out of the screen.
Additionally, CSS Grid provides properties for rows and gaps between columns and rows, giving developers more control over the layout of their web pages.
Thank you for reading my blog. I hope you like my article. If you like it, , give it a like and comment down.