You can create complex and flexible web designs with ease thanks to the CSS Grid layout framework. A two-grid based layout framework is shown, making it easier to create dynamic and adaptable page layouts. We will examine the foundations of CSS Grid, its traits, and how to use it successfully in your web applications in this post.
Understanding CSS Grid Basics
1. Grid Container and Grid Items
CSS Grid comprises of two main parts; the Grid Container and the Grid Item. The Grid Container acts as the container element for the Grid Items, keeping them organized. To establish a Grid Container, you utilize the "display grid" property.
Code:
.container {
display: grid;
}
2. Grid Lines and Tracks
Grid lines are the horizontal and vertical separators that establish the layout of a grid. The spaces between these lines, known as grid tracks, can be designated as either rows or columns. To define the number of columns and rows, you can use grid-template-columns and grid-template-rows properties.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Container Example</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
/* Three columns each 100 pixels wide */
grid-template-rows: repeat(2, 100px);
/* Two rows each 100 pixels tall */
grid-gap: 10px;
/* 10 pixels of gap between grid items */
}
.item {
background-color: #3498db;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
Output:
3. Placing Grid Items
By employing the grid-column and grid-row properties, we have the ability to position grid items within a grid container, indicating both the beginning and ending positions of the item:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Example</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px 100px;
grid-gap: 10px;
}
.item {
grid-column: 2 / 3;
grid-row: 1 / 3;
background-color: #3498db;
color: #fff;
text-align: center;
padding: 20px;
}
.one {
background-color: aqua;
}
.two {
background-color: red;
}
.three {
background-color: gray;
}
.four {
background-color: gold;
}
.five {
background-color: tan;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
This is the item
</div>
<div class="one">First</div>
<div class="two">Second</div>
<div class="three">Third</div>
<div class="four">Fourth</div>
<div class="five">Fifth</div>
</div>
</body>
</html>
Output:
Grid Features and Techniques
1. Grid Template Areas
One notable aspect of CSS Grid is its capability to assign names to grid areas and position elements within them. This feature offers an intuitive method for designing intricate layouts visually.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Example</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 100px 300px 100px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-gap: 10px;
}
.header {
grid-area: header;
background-color: #3498db;
color: #fff;
text-align: center;
padding: 20px;
}
.sidebar {
grid-area: sidebar;
background-color: #2ecc71;
color: #fff;
text-align: center;
padding: 20px;
}
.main {
grid-area: main;
background-color: #e74c3c;
color: #fff;
text-align: center;
padding: 20px;
}
.footer {
grid-area: footer;
background-color: #f39c12;
color: #fff;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
Header Content
</div>
<div class="sidebar">
Sidebar Content
</div>
<div class="main">
Main Content
</div>
<div class="footer">
Footer Content
</div>
</div>
</body>
</html>
Output:
2. Grid Gap
This attribute allows you to define the gap between the items within the grid. It serves as a shorthand for both grid-row-gap and grid-column-gap properties:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Example</title>
<style>
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, 1fr);
/* Three columns with equal width */
}
.item {
background-color: #3498db;
color: #fff;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
<div class="item">
Item 6
</div>
</div>
</body>
</html>
Output:
Applications
- Responsive web design: CSS grid is the best for making responsive layouts. It offers simple content rearranging depending on various screen sizes. This makes it the finest tool for developing websites that seamlessly work on different devices.
- Magazine-Style Layouts: When designing magazine-style layouts with several columns and sections, CSS Grid is preferable. It offers precise element size and positioning. Consequently, it provides layout designers more discretion.
- E-commerce Websites: CSS Grid may be quite helpful for e-commerce websites that employ product lists, categories, and filters. It enables designers to logically and aesthetically organise products in filters, and supplementary information.
- Dashboard and Admin Interfaces: The ideal tool for creating dashboards and admin interfaces, where a grid-like structure is frequently required to organise various components like charts, tables, and navigation elements, is CSS Grid.
- Image Galleries and Portfolios: CSS Grid makes simple the creation of image galleries and portfolios. It makes it simple to organise photographs in a grid structure, making it an attractive approach to exhibit work or goods.
- Blog and Content Websites: CSS Grid may be used to design stunning blog post and content-heavy website layouts. It makes it simple to organise text, photos, and multimedia components.
- Forms and Input Fields: CSS Grid is also helpful when you need to properly align input fields and labels. It facilitates the development of structured, user-friendly forms.
- Multi-Column Layouts: CSS Grid offers a simple way to determine the number of columns and their associated widths when creating multi-column layouts for new articles or documentation.
- Complex UI Components: Spreadsheets, calendars, and other components may be created with CSS Grid. It offers the framework required to organise the parts in a grid-like style.
- Design Prototyping: A powerful tool for producing design prototypes is CSS Grid. Before putting their concepts into action, designers may swiftly review complicated layouts, test various arrangements, and make adjustments.
- Print Stylesheets: Create print stylesheets with CSS Grid to precisely manage the layout of printed materials like reports, articles, and brochures.