Skip to content

Instantly share code, notes, and snippets.

@santosh

santosh/index1.html

Created April 16, 2021 05:47
Show Gist options
  • Save santosh/e82be4234dacd716a7d37653241fd928 to your computer and use it in GitHub Desktop.
Save santosh/e82be4234dacd716a7d37653241fd928 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Grid for beginners.
Raw
index1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid</title>
<style>
.container {
display: grid;
grid-template-columns: 70% 30%;
gap: 1rem;
}
.container > div {
background: #eee;
padding: 1em;
}
.container > div:nth-child(odd) {
background: #ddd;
}
</style>
</head>
<body>
<div class="container">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus aspernatur quibusdam ipsum dicta totam minima odio voluptas ad sit, alias cupiditate qui unde obcaecati labore velit sed voluptatum neque, soluta nesciunt incidunt quam vitae nobis? Labore neque nisi cupiditate error porro consectetur alias veniam. Harum provident at dignissimos id explicabo, error incidunt eligendi numquam tenetur maxime, vero neque sapiente earum dicta? Necessitatibus quam maiores impedit incidunt, voluptatum facere modi, odio laudantium hic est quia. Consectetur aspernatur labore quia sapiente esse?</div>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis eveniet consectetur hic ipsa fugit dolores nulla molestiae magnam dolorem perspiciatis aliquid, eum adipisci ex praesentium consequatur cum optio. Dignissimos, totam!</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus aspernatur quibusdam ipsum dicta totam minima odio voluptas ad sit, alias cupiditate qui unde obcaecati labore velit sed voluptatum neque, soluta nesciunt incidunt quam vitae nobis? Labore neque nisi cupiditate error porro consectetur alias veniam. Harum provident at dignissimos id explicabo, error incidunt eligendi numquam tenetur maxime, vero neque sapiente earum dicta? Necessitatibus quam maiores impedit incidunt, voluptatum facere modi, odio laudantium hic est quia. Consectetur aspernatur labore quia sapiente esse?</div>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis eveniet consectetur hic ipsa fugit dolores nulla molestiae magnam dolorem perspiciatis aliquid, eum adipisci ex praesentium consequatur cum optio. Dignissimos, totam!</div>
</div>
</body>
</html>
Raw
index2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid | Page 2</title>
<style>
.container {
display: grid;
/* grid-template-columns: 1fr 2fr 1fr; */
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
/* grid-auto-rows: 100px; */
grid-auto-rows: minmax(100px, auto);
}
.nested {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 70px;
}
.container > div {
background: #eee;
padding: 1em;
}
.container > div:nth-child(odd) {
background: #ddd;
}
.nested > div {
border: #333 1px solid;
padding: 1em;
}
</style>
</head>
<body>
<div class="container">
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta repellat iste, quia, beatae aperiam sint voluptatum exercitationem deleniti inventore cumque earum ipsum minima tenetur excepturi assumenda eius illum sed rem ad delectus asperiores nulla commodi reiciendis dignissimos? Ad, itaque magnam?</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>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>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid | Page 3</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-auto-rows: minmax(100px, auto);
gap: 1em;
justify-items: stretch;
align-items: stretch;
}
.container > div {
background: #eee;
padding: 1em;
}
.container > 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 {
/* align-self: stretch; */
grid-column: 1/3;
grid-row: 2/4;
}
</style>
</head>
<body>
<div class="container">
<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