Create a Grid Layout in div.grid-container Grid layout requirements: o 6 columns when the viewport is greater than 1200px o 3 columns when the viewport is greater than 800px and less than 1200px o 1 column when the viewport is less than 800px Read this article about setting width ranges with media queries o It may help to change the background color of div.container to test your media queries At least one grid item must span multiple rows and columns o The grid item that spans multiple rows and columns must change with each media query Use grid-template-areas to specify named grid areas Your grid may have any number of rows I recommend you design the grid for each media query in Figma (or by hand) before coding Write your styles directly in this HTML document's embedded stylesheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./../styles/styles.css">
<link rel="stylesheet" href="./../styles/grid.css">
<script src="https://kit.fontawesome.com/7f74e4e346.js" crossorigin="anonymous"></script>
<title>Grid w/ Media Queries</title>
<style>
/* Write your styles here! */
.grid-container {
height: 500px; /* you can adjust the height as you see fit */
background: white;
}
</style>
</head>
<body>
<section>
<header>
<h1><span><i class="fas fa-border-all"></i>Grid w/ Media Queries</span> <a href="./../index.html"><i class="fas fa-home"></i></a></h1>
</header>
</section>
<section>
<h3>Overview</h3>
<ul>
<li>Create a Grid Layout in <code>div.grid-container</code>
</li>
<li>Grid layout requirements:
<ul>
<li>6 columns when the viewport is greater than 1200px</li>
<li>3 columns when the viewport is greater than 800px and less than 1200px</li>
<li>1 column when the viewport is less than 800px</li>
</ul>
<li><a href="https://www.freecodecamp.org/news/media-queries-width-ranges/">Read this article about setting width ranges with media queries</a>
<ul>
<li>It may help to change the background color of <code>div.container</code> to test your media queries</li>
</ul>
</li>
<li>At least one grid item must span multiple rows and columns
<ul>
<li>
The grid item that spans multiple rows and columns must change with each media query
</li>
</ul>
</li>
<li>Use <code>grid-template-areas</code> to specify named grid areas</li>
<li>Your grid may have any number of rows</li>
<li>I recommend you design the grid for each media query in <a href="https://www.figma.com/">Figma</a> (or by hand) before coding</li>
<li>Write your styles directly in this HTML document's embedded stylesheet</li>
</ul>
</section>
<section>
<h3><code>div.container</code> is just below this <code>h3</code> element!</h3>
<div class="grid-container">
</div>
</section>
<section>
<a href="./flex.html">
<footer>
<span>On to Flex!</span>
<i class="fas fa-arrow-right"></i>
</footer>
</a>
</section>
</body>
</html>
Trending now
This is a popular solution!
Step by step
Solved in 2 steps
