10.1 Combining with Media Queries
CSS Grid Layout provides some awesome tools for creating complex and adaptive layouts. Mixing CSS Grid with media queries lets you create layouts that adapt to different screen sizes and devices. Let's dive into how to use media queries with CSS Grid for creating flexible and adaptive web pages.
Basic Concepts of Media Queries
Media queries allow you to apply different CSS styles based on device characteristics like screen width, screen height, screen orientation, and more. When combined with CSS Grid, media queries let you change the structure and placement of elements based on screen sizes.
Syntax of Media Queries:
@media (condition) {
/* Styles applied when condition is met */
}
Where “condition” is the condition under which styles will be applied.
Most commonly, conditions related to screen width such as max-width and min-width are used.
10.2 Changing the Number of Columns
Full Implementation Example (changing the number of columns based on screen width):
CSS
/* Base style for all screens */
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* For screens wider than 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* Two columns */
}
}
/* For screens wider than 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(3, 1fr); /* Three columns */
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adaptive Layout with CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Element 1</div>
<div class="grid-item">Element 2</div>
<div class="grid-item">Element 3</div>
<div class="grid-item">Element 4</div>
<div class="grid-item">Element 5</div>
<div class="grid-item">Element 6</div>
</div>
</body>
</html>
Code Explanation:
- Base style: creates a Grid container with one column for all screens
- Media query for screens wider than 600px: changes the layout to two columns
- Media query for screens wider than 900px: changes the layout to three columns
10.3 Dependency on Screen Width
Full Implementation Example (changing the placement of elements based on screen width):
CSS
/* Base style for all screens */
.grid-container {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
gap: 10px;
}
.header {
grid-area: header;
background-color: #2ecc71;
padding: 20px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #3498db;
padding: 20px;
text-align: center;
}
.main {
grid-area: main;
background-color: #9b59b6;
padding: 20px;
text-align: center;
}
.footer {
grid-area: footer;
background-color: #e74c3c;
padding: 20px;
text-align: center;
}
/* For screens wider than 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 3fr;
}
}
/* For screens wider than 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 1fr 2fr;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adaptive Placement with CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Code Explanation:
- Base style: creates a Grid container with four rows and one column for all screens
- Media query for screens wider than 600px: changes the layout to two columns and updates the areas: header takes up two columns, main content and sidebar take up one column each, footer takes up two columns
- Media query for screens wider than 900px: changes the layout to three columns and updates the areas: header takes up three columns, main content and sidebar take up one and two columns respectively, footer takes up three columns
10.4 Changing Element Sizes
Full Implementation Example (changing the sizes of elements based on screen width):
CSS
/* Base style for all screens */
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 100px;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* For screens wider than 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
}
}
/* For screens wider than 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adaptive Sizes with CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">Element 1</div>
<div class="grid-item item2">Element 2</div>
<div class="grid-item item3">Element 3</div>
<div class="grid-item item4">Element 4</div>
<div class="grid-item item5">Element 5</div>
<div class="grid-item item6">Element 6</div>
</div>
</body>
</html>
Code Explanation:
- Base style: creates a Grid container with two columns and automatic row heights of
100pxfor all screens - Media query for screens wider than 600px: changes the layout to three columns and increases row height to
150px - Media query for screens wider than 900px: changes the layout to four columns and increases row height to
200px
GO TO FULL VERSION