Skip to content

Instantly share code, notes, and snippets.

@davidvandenbor

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

Last active February 2, 2022 06:48
Show Gist options
  • Save davidvandenbor/4dea39195e705081b2a076bed0433c40 to your computer and use it in GitHub Desktop.
Save davidvandenbor/4dea39195e705081b2a076bed0433c40 to your computer and use it in GitHub Desktop.
Download ZIP
Grid challenge exercise solution using grid lines
Raw
Grid-challenge-exercise-solution-with-grid-lines.md

Grid challenge exercise (solution with grid-lines)

One of three lesson files with CSS grid exercises. This file contains the grid lines solution to the layout challenge. There's a second one with the solution using grid areas 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%;
transition: all 2s ease;
}
main {
color: white;
font-size: 1vw;
display: grid;
grid-gap: 10px;
/* omit the following two lines for the challenge */
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
max-width: 1200px;
margin: 10px auto;
}
.orange {
background: orange;
/* omit the following two lines for the challenge */
grid-row: 1/3;
grid-column: 1/2;
}
.blue {
background: blue;
/* omit the following two lines for the challenge */
grid-row: 1/3;
grid-column: 2/3;
}
.red {
background: red;
/* omit the following two lines for the challenge */
grid-row: 1/2;
grid-column: 3/4;
}
.green {
background: green;
/* delete the following two lines for the challenge */
grid-row: 2/3;
grid-column: 3/4;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment