Font-end design is becoming more and more complex as time goes on. Earlier, we used float and position to align our elements. Later we shifted to CSS flex. But the problem with CSS flex was that, it was one dimensional. Internet usage is increasing day by day, resulting in increasing use of mobile apps, PWA apps and websites. We needed some way to design layouts in 2 dimensions with ease. Here comes the CSS grid to help. It provides a mechanism for developers to divide available space for layout into columns and rows using a set of predictable sizing behaviors.
In addition, due to its ability to explicitly position items in the grid, Grid Layout allows dramatic transformations in visual layout structure without requiring corresponding markup changes.
What is CSS Grid?
CSS Grid is a two-dimensional layout system that aims to help in design dynamic and complex layouts. It offers a grid-based layout design, with rows and columns, making it easier to design web pages. Like tables, grid layout enables us to align elements into columns and rows in a very simpler way.
A grid can be designed using a parent (grid container) and its children (grid items)
Simple Grid based layout example.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
CSS Grid layout
As I discussed above, CSS Grid is a two-dimensional layout system. Grid items can be aligned on X and Y axes (vertically and horizontally) at the same time.
CSS Grid Properties
grid-template-columns
The grid-template-columns property specifies the number of columns and their width in
the grid layout. The values are
list separated by space, where each value specifies the size of the respective column.
grid-template-columns: none|auto|repeat|max-content|min-content|lengthValue;
Above example explained
grid-template-rows
The grid-template-rows tells the vertical height of row. This property specifies the
number of rows and their width in the grid layout.
The values are list separated by space, where each value specifies the size of the respective row.
grid-template-rows: none|auto|repeat|max-content|min-content|lengthValue;
Above example explained
grid-gap
grid-gap property is used to specify the size of the gap between the rows, and between
the columns. It is very easy to maintain the
space between elements because of this property. You can apply gaps between columns and rows at the
same time.
grid-column-gap
grid-column-gap is used only for columns. This property is usded to specify the size of
the gap between the columns.
grid-row-gap
grid-row-gap is used only for rows. This property is usded to specify the size of the
gap between the rows.
grid-template-areas
grid-template-areas is an alternate method to position items on the grid. You can use
line-based placement. Each line represent one row.
Let's create a layout based on above image:
<div className="layout-grid">
<div className="headerBox">Header</div>
<div className="sidebarBox">Sidebar</div>
<div className="contentBox">Content</div>
<div className="footerBox">Footer</div>
</div>
/* CSS */
.layout-grid {
display: grid;
height: 100vh;
grid-template-columns: 1fr 3fr;
grid-template-rows: 80px auto 50px;
grid-template-areas: "header header"
"sidebar content"
"footer footer";
}
.headerBox {
grid-area: header;
background: #900d5e;
}
.sidebarBox {
grid-area: sidebar;
background: #7747e6
}
.contentBox {
grid-area: content;
background: #008dff
}
.footerBox {
grid-area: footer;
background-color: #73a922
}
As you can see in the above example, we have passed three rows to grid-template-areas.
Each row describes the positioning of grid items.
In the first row we have positioned header in both col-1 and col-2. In the 2nd
row we have positioned sidebar
for col-1 and content for col-2.
In the 3rd row we have positioned footer for both col-1 and col-2.
Responsive layout design using grid-template-areas
Let's take the above example and make it responsive.
<div className="layout-grid">
<div className="headerBox">Header</div>
<div className="sidebarBox">Sidebar</div>
<div className="contentBox">Content</div>
<div className="footerBox">Footer</div>
</div>
/* CSS */
@media only screen and (max-width: 568px) {
.layout-grid {
grid-template-areas: "header header"
"sidebar sidebar"
"content content"
"footer footer";
grid-template-rows: 50px 70px auto 50px;
}
}
grid-auto-columns
The grid-auto-columns property sets and affects only columns with the size is not set.
In the below example, all the grid items width are set to 100px except grid-item3.
#grid-container {
display: grid;
grid-template-areas: "a a";
grid-auto-columns: 100px;
gap: 10px;
height: 100px;
padding: 10px;
background-color: #9D0D6C;
}
#grid-container > div {
background-color: #fdddf2;
}
<div id="grid-container">
<div id="grid-item1"></div>
<div id="grid-item2"></div>
<div id="grid-item3" style="width: 40px;"></div>
<div id="grid-item4"></div>
<div id="grid-item5"></div>
<div id="grid-item6"></div>
</div>
grid-auto-rows
Similar to grid-auto-columns, grid-auto-rows property sets and affects only the rows size. It applies only to those items which size is not set.
Parent (Grid Container) properties
- justify-items: It align items horizontally on x axis in the cell
- align-items: It align items vertically on y axis in the cell
- justify-content: It is used to align the grid items inside the container.
.grid-container {
height: 250px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background-color: #9D0D6C;
padding: 10px;
gap: 1px;
}
.grid-container > div {
background-color: #fdddf2;
padding: 10px 0;
font-size: 30px;
}
<div class="grid-container">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
</div>
Child (Grid items) properties
- justify-self
- align-self
start | end | center | stretch .
justify-self: start:
justify-self: center:
justify-self: end:
justify-self: stretch:
Note that justify-self is ignored in Flexbox layouts.
start | end | center | stretch .
align-self: start:
align-self: center:
align-self: end:
align-self: stretch:
How to align a div vertically and horizontally center within container?
<style>
.grid{
display: grid;
height: 100px;
background-color:#0099ff;
padding: 5px 10px;
justify-items: center;
align-items: center;
}
</style>
<div class="grid">
<div style=" background-color: #f5f5f5;">child</div>
</div>
How to decide what to use ? Flex vs CSS Grid. Which is better CSS Grid or Flexbox?
Though, this post is not about CSS Grid or Flexbox. But, I as a developer it is good to know it.
The golden rule for deciding to use display grid or flex is, if you need to layout the elements in 1
dimension,
you can use flexbox, if you need to control the elements in 2 dimensions then better use grid.
CSS grid is more advance, you can achieve very complex and dynamic layout with ease. CSS Grid latest
concepts which was introduced after Flex therefore
its support is not across browsers. But, all the latest browser are already supporting it.
0 Comments