Skip to content

Instantly share code, notes, and snippets.

@shahalom

shahalom/css-grid-example.html

Last active May 24, 2023 19:28
Show Gist options
  • Save shahalom/477771ce8eb03b17e17ffc21ff0170b0 to your computer and use it in GitHub Desktop.
Save shahalom/477771ce8eb03b17e17ffc21ff0170b0 to your computer and use it in GitHub Desktop.
Download ZIP
Grid layout example with css grid
Raw
css-grid-example.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid layout with css grid</title>
<style>
.wrap {
padding: 2rem;
}
.item-list {
--column-count: 1;
display: grid;
gap: 1rem;
grid-template-columns: repeat(var(--column-count), 1fr);
}
@media (width > 768) {
.item-list {
--column-count: 2;
}
}
@media (width > 1100) {
.item-list {
--column-count: 3;
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="item-list">
<div class="item-block">
<div>
<img src="https://images.unsplash.com/photo-1484255952175-1fc3fb4432b1?&w=600"/>
</div>
<div>
<h2>Hello, here we are going ... 1</h2>
<div>
<p>Ne facilis scripserit vis. Eu eam veniam inermis, ancillae iudicabit adipiscing cum an, in vim probo nusquam. Feugiat prodesset per ad, per ad congue eruditi consequat. Cu vim regione eripuit necessitatibus, no debitis appetere sensibus duo, usu error soluta oportere at. Qui aliquip persecuti cu, modus ignota est no, eam cu iuvaret probatus comprehensam.</p>
</div>
</div>
</div>
<div class="item-block">
<div>
<img src="https://images.unsplash.com/photo-1492814975943-b735c0c7a99d?&w=600"/>
</div>
<div>
<h2>Hello, here we are going ... 2</h2>
<div>
<p>Ne facilis scripserit vis. Eu eam veniam inermis, ancillae iudicabit adipiscing cum an, in vim probo nusquam. Feugiat prodesset per ad, per ad congue eruditi consequat. Cu vim regione eripuit necessitatibus, no debitis appetere sensibus duo, usu error soluta oportere at. Qui aliquip persecuti cu, modus ignota est no, eam cu iuvaret probatus comprehensam.</p>
</div>
</div>
</div>
<div class="item-block">
<div>
<img src="https://images.unsplash.com/photo-1493551511613-abc8320c265e?&w=600"/>
</div>
<div>
<h2>Hello, here we are going ... 3</h2>
<div>
<p>Ne facilis scripserit vis. Eu eam veniam inermis, ancillae iudicabit adipiscing cum an, in vim probo nusquam. Feugiat prodesset per ad, per ad congue eruditi consequat. Cu vim regione eripuit necessitatibus, no debitis appetere sensibus duo, usu error soluta oportere at. Qui aliquip persecuti cu, modus ignota est no, eam cu iuvaret probatus comprehensam.</p>
</div>
</div>
</div>
<div class="item-block">
<div>
<img src="https://images.unsplash.com/photo-1494031021996-ac2eb738d846?&w=600"/>
</div>
<div>
<h2>Hello, here we are going ... 4</h2>
<div>
<p>Ne facilis scripserit vis. Eu eam veniam inermis, ancillae iudicabit adipiscing cum an, in vim probo nusquam. Feugiat prodesset per ad, per ad congue eruditi consequat. Cu vim regione eripuit necessitatibus, no debitis appetere sensibus duo, usu error soluta oportere at. Qui aliquip persecuti cu, modus ignota est no, eam cu iuvaret probatus comprehensam.</p>
</div>
</div>
</div>
<div class="item-block">
<div>
<img src="https://images.unsplash.com/photo-1484268234627-2278797bec04?&w=600"/>
</div>
<div>
<h2>Hello, here we are going ... 5</h2>
<div>
<p>Ne facilis scripserit vis. Eu eam veniam inermis, ancillae iudicabit adipiscing cum an, in vim probo nusquam. Feugiat prodesset per ad, per ad congue eruditi consequat. Cu vim regione eripuit necessitatibus, no debitis appetere sensibus duo, usu error soluta oportere at. Qui aliquip persecuti cu, modus ignota est no, eam cu iuvaret probatus comprehensam.</p>
</div>
</div>
</div>
<div class="item-block">
<div>
<img src="https://images.unsplash.com/photo-1490709249654-d82101f4857f?&w=600"/>
</div>
<div>
<h2>Hello, here we are going ... 6</h2>
<div>
<p>Ne facilis scripserit vis. Eu eam veniam inermis, ancillae iudicabit adipiscing cum an, in vim probo nusquam. Feugiat prodesset per ad, per ad congue eruditi consequat. Cu vim regione eripuit necessitatibus, no debitis appetere sensibus duo, usu error soluta oportere at. Qui aliquip persecuti cu, modus ignota est no, eam cu iuvaret probatus comprehensam.</p>
</div>
</div>
</div>
<div class="item-block">
<div>
<img src="https://images.unsplash.com/photo-1484255952175-1fc3fb4432b1?&w=600"/>
</div>
<div>
<h2>Hello, here we are going ... 7</h2>
<div>
<p>Ne facilis scripserit vis. Eu eam veniam inermis, ancillae iudicabit adipiscing cum an, in vim probo nusquam. Feugiat prodesset per ad, per ad congue eruditi consequat. Cu vim regione eripuit necessitatibus, no debitis appetere sensibus duo, usu error soluta oportere at. Qui aliquip persecuti cu, modus ignota est no, eam cu iuvaret probatus comprehensam.</p>
</div>
</div>
</div>
<div class="item-block">
<div>
<img src="https://images.unsplash.com/photo-1568858989121-ac417bc11135?&w=600"/>
</div>
<div>
<h2>Hello, here we are going ... 8</h2>
<div>
<p>Ne facilis scripserit vis. Eu eam veniam inermis, ancillae iudicabit adipiscing cum an, in vim probo nusquam. Feugiat prodesset per ad, per ad congue eruditi consequat. Cu vim regione eripuit necessitatibus, no debitis appetere sensibus duo, usu error soluta oportere at. Qui aliquip persecuti cu, modus ignota est no, eam cu iuvaret probatus comprehensam.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment