Skip to content

Instantly share code, notes, and snippets.

@amantheroot

amantheroot/index.html

Created February 1, 2019 03:40
Show Gist options
  • Save amantheroot/d86f88232c3ca5229f7d3261ff09c4dd to your computer and use it in GitHub Desktop.
Save amantheroot/d86f88232c3ca5229f7d3261ff09c4dd to your computer and use it in GitHub Desktop.
Download ZIP
CSS Grid by Traversy Media
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Grids</title>
<style>
.wrapper{
display:grid;
grid-template-columns: 70% 30%;
/*
grid-column-gap:1em;
grid-row-gap:1em;
*/
grid-gap:1em;
}
.wrapper > div{
background:#eee;
padding:1em;
}
.wrapper > div:nth-child(odd){
background:#ddd;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla quo eveniet placeat. In porro, repudiandae ipsum voluptatibus ratione enim accusantium rem consequatur ab? Alias tenetur ratione quibusdam accusantium aut quis totam! Voluptas labore officiis, unde sequi ad fuga, ex assumenda dolorem placeat atque excepturi ipsa architecto dolores dignissimos quod quibusdam quasi repellat vero cum perspiciatis laboriosam qui sint exercitationem quisquam. Quisquam suscipit fugiat doloremque quasi ad debitis dolor quaerat nihil aliquam at ducimus consequuntur repudiandae numquam eligendi, fugit, excepturi doloribus!
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolorem sit similique sequi veritatis quas soluta nam alias maxime. Quos rerum soluta neque, incidunt eius illum amet laboriosam nostrum vel.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla quo eveniet placeat. In porro, repudiandae ipsum voluptatibus ratione enim accusantium rem consequatur ab? Alias tenetur ratione quibusdam accusantium aut quis totam! Voluptas labore officiis, unde sequi ad fuga, ex assumenda dolorem placeat atque excepturi ipsa architecto dolores dignissimos quod quibusdam quasi repellat vero cum perspiciatis laboriosam qui sint exercitationem quisquam. Quisquam suscipit fugiat doloremque quasi ad debitis dolor quaerat nihil aliquam at ducimus consequuntur repudiandae numquam eligendi, fugit, excepturi doloribus!
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolorem sit similique sequi veritatis quas soluta nam alias maxime. Quos rerum soluta neque, incidunt eius illum amet laboriosam nostrum vel.
</div>
</div>
</body>
</html>
Raw
index2.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Grid</title>
<style>
.wrapper{
display:grid;
/* grid-template-columns:1fr 1fr 1fr;*/
grid-template-columns:repeat(3, 1fr);
grid-gap:1em;
/* grid-auto-rows:100px; */
grid-auto-rows: minmax(100px, auto);
}
.nested{
display:grid;
grid-template-columns:repeat(3, 1fr);
grid-auto-rows: 70px;
grid-gap:1em;
}
.wrapper > div{
background:#eee;
padding:1em;
}
.wrapper > div:nth-child(odd){
background:#ddd;
}
.nested > div{
border:#333 1px solid;
padding:1em;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
Lorem ipsum dolor sit.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam libero excepturi cupiditate quasi sit. Iure totam a magni, veritatis, voluptatem voluptates tempora praesentium et nisi eligendi. A saepe eaque aliquam, earum nihil quia? Nemo delectus possimus, explicabo repudiandae recusandae. Mollitia!
</div>
<div class="nested">
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
</div>
<div>
Lorem ipsum dolor sit.
</div>
<div>
Lorem ipsum dolor sit.
</div>
<div>
Lorem ipsum dolor sit.
</div>
<div>
Lorem ipsum dolor sit.
</div>
</div>
</body>
</html>
Raw
index3.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Grid</title>
<style>
.wrapper{
display:grid;
grid-template-columns:1fr 2fr 1fr;
grid-auto-rows:minmax(100px, auto);
grid-gap:1em;
justify-items:stretch;
align-items:stretch;
}
.wrapper > div{
background:#eee;
padding:1em;
}
.wrapper > div:nth-child(odd){
background:#ddd;
}
.box1{
/*align-self:start;*/
grid-column:1/3;
grid-row:1/3;
}
.box2{
/*align-self:end;*/
grid-column:3;
grid-row:1/3;
}
.box3{
/*justify-self:end;*/
grid-column:2/4;
grid-row:3;
}
.box4{
grid-column:1;
grid-row:2/4;
border:1px solid #333;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
<div class="box box4">Box 4</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment