Skip to content

Instantly share code, notes, and snippets.

@davidvandenbor

davidvandenbor/Grid-challenge-exercise-solution-with-grid-areas.md

Last active May 4, 2021 20:47
Show Gist options
  • Save davidvandenbor/248d1d5f64456565365ca51ce2634e63 to your computer and use it in GitHub Desktop.
Save davidvandenbor/248d1d5f64456565365ca51ce2634e63 to your computer and use it in GitHub Desktop.
Download ZIP
Grid challenge exercise solution using grid areas
Raw
Grid-challenge-exercise-solution-with-grid-areas.md

Grid challenge exercise (solution with grid areas)

One of three lesson files with CSS grid exercises. This file contains the grid areas solution to the layout challenge. There's a second one with the solution using grid lines, see here.

Preview: at bl.ocks.org

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section class="orange"></section>
<section class="blue"></section>
<section class="red"></section>
<section class="green"></section>
</main>
</body>
</html>
Raw
style.css
section {
padding: 30%
}
main {
color: white;
font-size: 1vw;
display: grid;
grid-gap: 10px;
max-width: 1200px;
margin: 10px auto;
/* omit the following five lines for the challenge */
grid-template-areas:
"one two three"
"one two four";
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
.orange {
background: orange;
/* omit the following line for the challenge */
grid-area: one
}
.blue {
background: blue;
transition: all 2s ease;
/* omit the following line for the challenge */
grid-area: two;
}
.red {
background: red;
/* omit the following line for the challenge */
grid-area: three;
}
.green {
background: green;
/* omit the following line for the challenge */
grid-area: four;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment