CSS Grid
CSS Grid provides a powerful layout framework for creating complex and responsive web layouts.
Advance Technique
Here are some advanced techniques that you can apply with CSS Grid,
Nested Grids
You can insert a grid container into other grid containers to create a complex layout. This allows for more control over placement and layout.
Example-
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.nested-grid {
display: grid;
grid-template-columns: 1fr 2fr;
}
Grid Template Areas
Grid template fields allow you to define named grid fields and assign elements to those fields. This provides a more tangible and intuitive way to design programs.
Example-
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
Responsive Grids
Use media queries to create responsive grids that match different screen sizes. Adjust the grid layout, color size, or grid template location based on view width.
Example-
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
}
Grid Alignment
CSS Grid provides properties such as justify-items, align-items, justify-content, and align-content to manage the grid items in the grid container
Example-
.grid-container {
display: grid;
justify-items: center; /* Horizontal alignment */
align-items: center; /* Vertical alignment */
}
Auto Placement
By default, web elements are automatically placed on the grid based on their order in the HTML source. You can use the grid-auto-flow property to control the auto-placement behavior.
Example-
.grid-container {
display: grid;
grid-auto-flow: dense; /* Controls the auto-placement algorithm */
}
Grid Gap
Use the grid-gap or gap property to add space between grid rows and columns. This can be specified as a single value for parallelism or as a different value between rows and columns.
Example-
.grid-container {
display: grid;
grid-gap: 20px; /* Equal space between rows and columns */
/* OR */
gap: 20px 10px; /* Different space for rows and columns */
}
Example-
Grid is the given basic example of designing an advanced responsive grid using CSS Grid,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Card Example</title>
<style>
/* Styling for grid container */
.grid-container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
min-height: 100vh;
}
/* Grid header styling */
.header {
grid-area: header;
background-color: #b3def1;
color: #040404;
padding: 10px;
font-weight: 600;
}
.sidebar {
grid-area: sidebar;
background-color: #f0f0f0;
padding: 10px;
}
.content {
grid-area: content;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
.section1, .section2, .section3 {
background-color: #f9f9f9;
padding: 10px;
}
/* Grid footer styling */
.footer {
grid-area: footer;
background-color: #333;
color: #fff;
padding: 10px;
}
/* Responsive adjustments for small display*/
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"sidebar"
"content"
"footer";
}
}
</style>
</head>
<body>
<div class="grid-container">
<header class="header">Header</header>
<nav class="sidebar">Sidebar</nav>
<main class="content">
<section class="section1">Grid Section 1</section>
<section class="section2">Grid Section 2</section>
<section class="section3">Grid Section 3</section>
</main>
<footer class="footer">Footer</footer>
</div>
</body>
</html>
In the above example-
- We have a web container with a title, sidebar, main content area, and footer.
- The
grid-template-areasproperty is used to define the layout areas of the grid. - In the main content area we have nested grids (
section1, section2, and section3) with different column ratios. - Media queries are used to change the layout of small screens, by switching to a single column layout.
Output-
These advanced techniques allow you to create versatile and responsive layouts with CSS Grid, and give you precise control over the positioning, alignment, and appearance of elements on the web Try these techniques check to unlock the full capabilities of CSS Grid for your projects.
Also, Read: How to show the cards on the webpage using CSS3?
Leave Comment