Skip to content

Instantly share code, notes, and snippets.

@modster

modster/grid-auto-flow.html

Forked from prof3ssorSt3v3/grid-auto-flow.html
Created April 19, 2023 20:56
Show Gist options
  • Save modster/605bd0a4c9126e97679beaec14a2a070 to your computer and use it in GitHub Desktop.
Save modster/605bd0a4c9126e97679beaec14a2a070 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
grid-auto-flow.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Grid &amp; grid-auto-flow</title>
<style>
*{
box-sizing: border-box;
}
.box{
font-weight: 700;
font-family: sans-serif;
color: white;
background-color: cornflowerblue;
border:1px solid #333;
/* dimensions */
/*
height: 150px;
width: 150px;
*/
/* center content */
display: grid;
justify-content: center;
align-items: center;
}
main{
display: grid;
grid-template-columns: repeat(5, minmax(150px, 1fr) );
/* grid-template-rows: 150px;*/
grid-auto-rows: 150px;
grid-gap: 10px;
grid-auto-flow: dense;
}
.box:nth-child(3n){
background-color: coral;
grid-column: span 2;
grid-row: span 2;
}
</style>
</head>
<body>
<main>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
<div class="box">Box 8</div>
<div class="box">Box 9</div>
<div class="box">Box 10</div>
<div class="box">Box 11</div>
<div class="box">Box 12</div>
<div class="box">Box 13</div>
<div class="box">Box 14</div>
<div class="box">Box 15</div>
<div class="box">Box 16</div>
<div class="box">Box 17</div>
<div class="box">Box 18</div>
<div class="box">Box 19</div>
<div class="box">Box 20</div>
<div class="box">Box 21</div>
<div class="box">Box 22</div>
<div class="box">Box 23</div>
<div class="box">Box 24</div>
<div class="box">Box 25</div>
<div class="box">Box 26</div>
<div class="box">Box 27</div>
<div class="box">Box 28</div>
<div class="box">Box 29</div>
<div class="box">Box 30</div>
<div class="box">Box 31</div>
<div class="box">Box 32</div>
<div class="box">Box 33</div>
<div class="box">Box 34</div>
<div class="box">Box 35</div>
<div class="box">Box 36</div>
<div class="box">Box 37</div>
<div class="box">Box 38</div>
<div class="box">Box 39</div>
<div class="box">Box 40</div>
<div class="box">Box 41</div>
<div class="box">Box 42</div>
<div class="box">Box 43</div>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment