CSS Tutorial: A Comprehensive Guide
Master CSSS with our in-depth tutorials. From beginner to advanced topics, explore essential concepts and upskill yourself.
- 23
- 4
Tutorial Playlist
23 Lessons1. CSS Tutorials
2. CSS Media Queries
3. CSS Selectors
4. CSS Navigation Bar
5. CSS Transition
6. CSS Text
7. How to Center a Div in CSS
8. CSS Images
9. CSS Float
10. CSS Form
11. CSS Inline Block
12. CSS Examples
13. CSS Dropdown
14. CSS Flexbox
15. Responsive Web Design
16. CSS Cheat Sheet
17. CSS Variables
18. CSS Grid Layout
Now Reading
19. CSS Animation
20. CSS Frameworks
21. CSS Positioning
22. CSS Comment
23. CSS Gradients
CSS Grid Layout
Cascading Style Sheets (CSS) is a language that styles web pages. CSS Grid Layout emerges as a dynamic solution for creating website layouts with enhanced efficiency and adaptability. From conventional approaches like floats or positioning, CSS Grid empowers designers to establish rows and columns, creating a grid-like framework.
What is CSS Grid Layout?
CSS Grid Layout is a modern way to design web layouts using a grid system. It lets developers easily organize content into rows and columns, making it simple to create complex and responsive designs. With the CSS Grid system, you have more control over how elements are positioned on a webpage, making it a great tool for modern web design.
Key Concepts
Grid Item: Elements contained within the grid container are called grid items.
Grid Line: Vertical or horizontal lines forming the grid's structure.
Grid Cell: Smallest unit, space between adjacent rows and columns.
Rows: Horizontal tracks in the grid.
Columns: Vertical tracks in the grid.
Gutter: Space between rows and columns.
Grid Track: A grid track refers to a single dimension (either a column or a row) within the grid. When you create a web grid layout, you define rows and columns. Each of these rows or columns is referred to as a grid track.
Fraction: The fraction unit (fr) is used to distribute available space within the grid container. You can use fractions (fr) to distribute available space among grid tracks. For example, setting a column to 1fr and another to 3fr means the second column gets thrice the space of the first.
Grid template
A CSS Grid Template is a blueprint that outlines the structure of a grid layout. It defines the arrangement of rows and columns, determines their dimensions, and dictates the placement of elements within the grid.
Grid template columns
In CSS Grid Layout, the grid-template-columns property is used to specify the size of the columns in a grid container.
Grid Container:
In CSS Grid Layout, the Grid container is an element where the display: grid property is utilized. It serves as the immediate parent of all grid items, which are organized within rows and columns.
Let's understand the concept of the grid container through an example.
<!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>
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 10px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<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>
</body>
</html>
Output:
In this example
- A grid container is configured with three columns and two rows., each set to a width of 100 pixels using the grid-template-columns property
- we could have used grid-template-rows to set the height of the rows if needed.
- The grid-gap property sets a gap of 10 pixels between the columns and rows.
Let us generate a css grid layout which has 2 columns and 4 rows.
<!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>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* 2 columns */
grid-template-rows: 100px 100px 100px 100px; /* 4 rows */
grid-gap: 10px; /* gap between grid items */
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<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>
</body>
</html>
This code will create a grid container with 2 columns and 4 rows, each row and column having a height and width of 100 pixels, respectively. The grid items within the container will have a gap of 10 pixels between them, and they will be styled with a gray background and centered text.
Output
Let us take another example to get more clarity on the topic and generate a css grid.
<!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>
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
grid-gap: 20px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<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>
</body>
</html>
Output:
In this example:
- A grid container is configured with three columns and two rows.
- The first column expands to utilize one fraction (1fr) of the available space, while the second column spans two fractions (2fr), and the third column again claims one fraction (1fr).
- Row heights are defined as 100 pixels for the first row and 200 pixels for the second row.
- A gap of 20 pixels exists between each grid item, contributing to the spacing within the grid layout.
Repeating Grid Tracks
In CSS Grid Layout, use the repeat () function to repeat the same grid track multiple times. The function is used when you have grid items of uniform sizes.
Let us consider an example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repeating Grid Tracks Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat (3, 1fr); /* Repeat 3 times, each track takes up equal space */
grid-gap: 10px;
justify-items: center;
align-items: center;
height: 200px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<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>
</body>
</html>
Output
In this example
- Each grid track takes up equal space using the 1fr unit, and the grid items are centered both horizontally and vertically within each cell.
- Also, set a fixed height for the grid container to ensure that the items are displayed properly.
Aligning Content With CSS Grid
In CSS Grid Layout, the align-content property aligns the grid along the row axis, while justify-content aligns the grid along the column axis.
Let us consider an example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Align-Content and Justify-Content Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);
grid-gap: 10px;
justify-content: center; /* Aligns items along the column axis */
align-content: center; /* Aligns items along the row axis */
height: 300px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<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>
</body>
</html>
Output
Grid Nesting
In CSS Grid Layout, nesting grids involve placing grid containers within other grid items.
Let us understand the concept through an example.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nesting Grids Example</title>
<style>
.outer-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.inner-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 5px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="outer-grid">
<div class="grid-item">Outer Grid Item 1</div>
<div class="grid-item">Outer Grid Item 2</div>
<div class="grid-item inner-grid">
<div class="grid-item">Inner Grid Item 1</div>
<div class="grid-item">Inner Grid Item 2</div>
</div>
</div>
</body>
</html>
Output
In this example, we've set up an outer grid featuring two columns. Within the second column of this outer grid resides another grid, referred to as the inner grid, also comprising two columns. This setup showcases grid nesting, where a grid container (inner-grid) resides within a grid item of the outer grid.
Conclusion
CSS Grid Layout is a game-changer for web design. It lets designers easily arrange content in rows and columns, making websites look great on any device. With CSS Grid, you have precise control over layout and alignment, making it easy to create awesome and responsive web pages.
CSS grid layout examples
Question 1: Create a grid layout with four columns and three rows, where each column has a width of 150 pixels and each row has a height of 100 pixels. Include a gap of 20 pixels between grid items.
.grid-container {
display: grid;
grid-template-columns: repeat(4, 150px);
grid-template-rows: repeat(3, 100px);
grid-gap: 20px;
}
Question 2: Implement a grid layout with two columns and five rows, where the first column takes up 30% of the available space, and the second column takes the remaining space. Each row should have a height of 50 pixels, and there should be a gap of 10 pixels between grid items.
.grid-container {
display: grid;
grid-template-columns: 30% 1fr;
grid-template-rows: repeat(5, 50px);
grid-gap: 10px;
}
FAQs
Q. What is the grid layout in CSS?
CSS Grid Layout revolutionizes web design by offering a powerful system to construct layouts with precise control over element positioning within rows and columns and helps us organize things on a webpage neatly.
Q. How to use a 12 column grid in CSS?
To use a 12 column grid in CSS, you can define the grid structure by setting up twelve equal-width columns. Here's an example:
.container {
display: grid;
grid-template-columns: repeat(12, 1fr); /* Creates 12 columns of equal width */
grid-gap: 10px; /* Adds a gap between columns */
}
.column {
/* Style individual columns as needed */
}
In this example, the .container class represents the grid container, and .column represents the grid items within the container.
Q. How to create grid pattern CSS?
A. To construct a grid pattern in CSS, you can use the grid-template-columns and grid-template-rows properties to define the number and size of columns and rows in the grid.
Q. How to apply CSS on a grid?
A. CSS can be applied to a grid by targeting the grid container and items using CSS selectors. You can style the grid container using properties like display: grid and grid-template-columns and apply styles to grid items using classes or IDs.
Q. What is the use of a layout grid?
A layout grid is used to organize content on a webpage in a systematic way. It helps maintain consistency in design, making it easier to create visually appealing layouts.
Q. Does CSS have a grid?
A. Yes, CSS has a grid system called CSS Grid Layout. It allows developers to create complex layouts with rows and columns.
Q. Is CSS Grid flexible?
A. Yes, the CSS Grid Layout is highly flexible. It allows developers to build responsive layouts that adapt to varying screen sizes and devices. With features like auto-sizing columns and rows, grid gaps, and alignment properties, CSS Grid offers great flexibility in designing layouts.
Q. How to change grid color in CSS?
A. You can change the color of the grid lines or grid items in CSS by applying the border property to grid items or using the background-color property for the grid container. Additionally, you can use CSS pseudo-elements like ::before and ::after to create decorative grid lines.
Mukesh
Working with upGrad as a Senior Engineering Manager with more than 10+ years of experience in Software Development and Product Management.
Talk to Career Expert
upGrad Learner Support
Talk to our experts. We’re available 24/7.
Indian Nationals
1800 210 2020
Foreign Nationals
+918045604032
Disclaimer
upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enrolling. upGrad does not make any representations regarding the recognition or equivalence of the credits or credentials awarded, unless otherwise expressly stated. Success depends on individual qualifications, experience, and efforts in seeking employment.
upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enr...