Skip to content

Instantly share code, notes, and snippets.

@santosh
Created Apr 16, 2021
Embed
What would you like to do?
CSS Grid for beginners.
<!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>
<!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>
<!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