x/box-o-sand
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Grid stuff, I think?

Browse Source
This commit is contained in:
Dan Buch 2019-03-03 14:05:16 -05:00
parent d1652164ac
commit 133080bf14
Signed by: meatballhat
GPG Key ID: 9685130D8B763EA7
1 changed files with 32 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
mdn-css-layout/grids/0-starting-point.html
View File

@ -1,39 +1,46 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Grid starting point</title> <title>CSS Grid starting point</title>
<style> <style>
body { body {
width: 90%; width: 90%;
max-width: 900px; max-width: 900px;
margin: 2em auto; margin: 2em auto;
font: .9em/1.2 Arial, Helvetica, sans-serif; font: .9em/1.2 Arial, Helvetica, sans-serif;
} }
.container > div { .container > div {
border-radius: 5px; border-radius: 5px;
padding: 10px; padding: 10px;
background-color: rgb(207,232,220); background-color: rgb(207,232,220);
border: 2px solid rgb(79,185,227); border: 2px solid rgb(79,185,227);
} }
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(100px, auto);
grid-gap: 20px;
gap: 20px;
}
</style> </style>
</head> </head>
<body> <body>
<h1>Simple grid example</h1> <h1>Simple grid example</h1>
<div class="container"> <div class="container">
<div>One</div> <div>One</div>
<div>Two</div> <div>Two</div>
<div>Three</div> <div>Three</div>
<div>Four</div> <div>Four</div>
<div>Five</div> <div>Five</div>
<div>Six</div> <div>Six</div>
<div>Seven</div> <div>Seven</div>
</div> </div>
</body> </body>
</html>
</html>