Skip to content

Instantly share code, notes, and snippets.

@cameronolivier

cameronolivier/basic-css-grid-example.html

Last active June 18, 2019 07:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cameronolivier/0e7794e725b84d2f08edf7be77128d6e to your computer and use it in GitHub Desktop.
Save cameronolivier/0e7794e725b84d2f08edf7be77128d6e to your computer and use it in GitHub Desktop.
Download ZIP
Basic CSS Grid Example
Raw
basic-css-grid-example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your First Grid!</title>
</head>
<style>
/* Create a grid of 5 columns, all evenly spaced, add a 10px gap; */
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1rem;
}
/* Just for visual representation: */
.grid > div {
font-family: helvetica, "Open Sans", arial, sans-serif;
font-weight: bold;
font-size: 2rem;
background: #1e202a;
color: #fcc002;
padding: 1rem;
text-align: center;
}
</style>
<body>
<div class="grid">
<div class="item">01</div>
<div class="item">02</div>
<div class="item">03</div>
<div class="item">04</div>
<div class="item">05</div>
<div class="item">06</div>
<div class="item">07</div>
<div class="item">08</div>
<div class="item">09</div>
<div class="item">10</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment