Skip to content

Instantly share code, notes, and snippets.

@huangsam
Last active January 5, 2021 16:59
Show Gist options
  • Save huangsam/5443b762e2a31e47d80c504e02a2b963 to your computer and use it in GitHub Desktop.
Save huangsam/5443b762e2a31e47d80c504e02a2b963 to your computer and use it in GitHub Desktop.
Play around with CSS Grid
root = true
[*]
indent_size = 2
indent_style = space
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="summary">
<h1>Grid Lock</h1>
<p>Comparing grid-fill with grid-fit.</p>
</div>
<div class="line">
<div class="line-item line-start">Start</div>
<div class="line-item line-end">End</div>
</div>
<p>Grid fill</p>
<div class="grid grid-fill">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<p>Grid fit</p>
<div class="grid grid-fit">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</body>
</html>
body {
/* Apply default margin */
margin: 30px 15px;
/* Apply default font */
font-family: sans-serif;
}
.summary {
/* Apply margin to summary */
margin-top: 30px;
margin-bottom: 30px;
}
.line {
/* Apply colors to informational line */
background-color: black;
color: white;
/* Apply padding to informational line */
padding: 5px;
}
.line .line-item {
/* Apply padding to each element */
padding: 5px;
}
.line .line-start {
/* Ensure first div sticks to the left */
float: left;
}
.line .line-end {
/* Ensure second div sticks to the right */
text-align: right;
}
.line:after {
/* Apply clearfix hack to line */
content: "";
clear: both;
display: table;
}
.grid {
/* Apply grid layout */
display: grid;
grid-gap: 10px;
}
.grid-fill {
/* Apply responsive fill */
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.grid-fit {
/* Apply responsive fit */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.box {
/* Apply colors to box */
background-color: black;
color: white;
/* Apply font centering */
text-align: center;
padding: 60px 0px;
/* Apply font size */
font-size: 30px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment