Learn HTML and CSS: A grid that chooses its own columns

Minmax and auto-fit

Gus looks at the website on his phone, on the laptop at reception and on the big screen in the clubhouse. "On the phone the pitches are too narrow, on the big screen too wide." A grid can choose for itself how many columns fit.

As many columns as fit

minmax(100px, 1fr) is a column that's at least 100px wide and at most one part of the free space. Put that in repeat with auto-fit instead of a number, and the grid chooses for itself how many columns fit: repeat(auto-fit, minmax(100px, 1fr)).

On a phone two or three fit, on a laptop all six, without a single media query. auto-fill does the same, but keeps empty columns when there are too few items. With auto-fit they drop away and the items fill the whole width.

Change the width under the page, or tap phone or laptop, and watch the columns follow.

style.css

1.field {2  display: grid;3  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));4  gap: 8px;5}

camping.example

Try it yourself

Put the cards side by side when there's room, each at least 200px wide and with 12px of space. Together they always fill the whole width.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3<head>4  <title>The Lazy Hammock</title>5  <link rel="stylesheet" href="basis.css">6  <link rel="stylesheet" href="style.css">7</head>8<body>9  <header>10    <img src="tent.svg" alt="" width="40" height="40">11    <h1>The Lazy Hammock</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="pitches.html">Pitches</a>15      <a href="prices.html">Prices</a>16      <a href="book.html">Book</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Camping among the pines in Bala. Peace and quiet guaranteed.</p>21    <section class="field">22      <div class="pitch tent">Tent</div>23      <div class="pitch caravan">Caravan</div>24      <div class="pitch camper">Camper</div>25      <div class="pitch cabin">Cabin</div>26      <div class="pitch tent">Tent</div>27      <div class="pitch hammock">Hammock</div>28    </section>29    <section class="cards">30      <article class="card">31        <h2>Showers</h2>32        <p>Hot showers and a washing-up area, open all day.</p>33      </article>34      <article class="card">35        <h2>Shop</h2>36        <p>Fresh bread every morning from 8 am.</p>37      </article>38      <article class="card">39        <h2>Lake</h2>40        <p>Swimming in summer, fishing all year round.</p>41      </article>42    </section>43  </main>44  <footer>45    <p>1 Hammock Lane, Bala LL23 7SR</p>46  </footer>47</body>48</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f5f2e8;5  color: #1f2a22;6}7header {8  padding: 12px 16px;9  background: #2d4a3a;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27}28.field {29  margin: 16px 0;30  padding: 9px;31  border-radius: 18px;32  background-color: #bcd6a0;33  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.13) 0 20px, transparent 20px 40px);34  box-shadow: inset 0 0 0 1px rgb(45 74 58 / 0.16);35}36/* A little tent, caravan or cabin on every pitch: only for the look. */37.pitch {38  position: relative;39  margin: 3px;40  padding: 27px 4px 9px;41  border-radius: 12px;42  background: #fffdf6;43  box-shadow: 0 1px 2px rgb(31 42 34 / 0.12), 0 6px 14px -8px rgb(31 42 34 / 0.4);44  font-size: 0.875rem;45  font-weight: 700;46  line-height: 1.25;47  text-align: center;48}49.pitch::before {50  content: "";51  position: absolute;52  top: 9px;53  left: 50%;54  width: 16px;55  height: 12px;56  margin-left: -8px;57  background: #e07a3f;58  clip-path: polygon(50% 0, 100% 100%, 0 100%);59}60.caravan::before {61  width: 18px;62  margin-left: -9px;63  border-radius: 5px 5px 3px 3px;64  background: #3d8c95;65  clip-path: none;66}67.camper::before {68  width: 20px;69  margin-left: -10px;70  background: #4f7cac;71  clip-path: polygon(0 15%, 68% 15%, 100% 55%, 100% 100%, 0 100%);72}73.cabin::before {74  background: #9c6b3f;75  clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%);76}77.hammock::before {78  top: 11px;79  width: 20px;80  height: 7px;81  margin-left: -10px;82  border-bottom: 3px solid #c99a2e;83  border-radius: 0 0 10px 10px;84  background: none;85  clip-path: none;86}87.reception::before {88  width: 14px;89  height: 14px;90  margin-left: -7px;91  border-radius: 50%;92  background: #2d4a3a;93  clip-path: none;94}95.lake::before {96  top: 10px;97  width: 24px;98  height: 11px;99  margin-left: -12px;100  border-radius: 50%;101  background: #5fa8d3;102  clip-path: none;103}104.playground::before {105  width: 18px;106  margin-left: -9px;107  background: #d1495b;108  clip-path: polygon(50% 0, 100% 100%, 82% 100%, 50% 32%, 18% 100%, 0 100%);109}110aside {111  padding: 12px 16px;112  background: #e4ecd6;113}114aside h2 {115  margin: 4px 0 8px;116  font-size: 1.05rem;117}118.card {119  padding: 4px 16px;120  border-radius: 12px;121  background: #ffffff;122  box-shadow: 0 1px 2px rgb(31 42 34 / 0.08);123}124.card h2 {125  font-size: 1.15rem;126}127footer {128  padding: 12px 16px;129  background: #2d4a3a;130  color: #ffffff;131}

camping.example

Ready for more?

The full lesson has 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

As many columns as fit

Change the width under the page, or tap phone or laptop, and watch the columns follow.

style.css

1.field {2  display: grid;3  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));4  gap: 8px;5}

camping.example

Try it yourself

Put the cards side by side when there's room, each at least 200px wide and with 12px of space. Together they always fill the whole width.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3<head>4  <title>The Lazy Hammock</title>5  <link rel="stylesheet" href="basis.css">6  <link rel="stylesheet" href="style.css">7</head>8<body>9  <header>10    <img src="tent.svg" alt="" width="40" height="40">11    <h1>The Lazy Hammock</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="pitches.html">Pitches</a>15      <a href="prices.html">Prices</a>16      <a href="book.html">Book</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Camping among the pines in Bala. Peace and quiet guaranteed.</p>21    <section class="field">22      <div class="pitch tent">Tent</div>23      <div class="pitch caravan">Caravan</div>24      <div class="pitch camper">Camper</div>25      <div class="pitch cabin">Cabin</div>26      <div class="pitch tent">Tent</div>27      <div class="pitch hammock">Hammock</div>28    </section>29    <section class="cards">30      <article class="card">31        <h2>Showers</h2>32        <p>Hot showers and a washing-up area, open all day.</p>33      </article>34      <article class="card">35        <h2>Shop</h2>36        <p>Fresh bread every morning from 8 am.</p>37      </article>38      <article class="card">39        <h2>Lake</h2>40        <p>Swimming in summer, fishing all year round.</p>41      </article>42    </section>43  </main>44  <footer>45    <p>1 Hammock Lane, Bala LL23 7SR</p>46  </footer>47</body>48</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f5f2e8;5  color: #1f2a22;6}7header {8  padding: 12px 16px;9  background: #2d4a3a;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27}28.field {29  margin: 16px 0;30  padding: 9px;31  border-radius: 18px;32  background-color: #bcd6a0;33  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.13) 0 20px, transparent 20px 40px);34  box-shadow: inset 0 0 0 1px rgb(45 74 58 / 0.16);35}36/* A little tent, caravan or cabin on every pitch: only for the look. */37.pitch {38  position: relative;39  margin: 3px;40  padding: 27px 4px 9px;41  border-radius: 12px;42  background: #fffdf6;43  box-shadow: 0 1px 2px rgb(31 42 34 / 0.12), 0 6px 14px -8px rgb(31 42 34 / 0.4);44  font-size: 0.875rem;45  font-weight: 700;46  line-height: 1.25;47  text-align: center;48}49.pitch::before {50  content: "";51  position: absolute;52  top: 9px;53  left: 50%;54  width: 16px;55  height: 12px;56  margin-left: -8px;57  background: #e07a3f;58  clip-path: polygon(50% 0, 100% 100%, 0 100%);59}60.caravan::before {61  width: 18px;62  margin-left: -9px;63  border-radius: 5px 5px 3px 3px;64  background: #3d8c95;65  clip-path: none;66}67.camper::before {68  width: 20px;69  margin-left: -10px;70  background: #4f7cac;71  clip-path: polygon(0 15%, 68% 15%, 100% 55%, 100% 100%, 0 100%);72}73.cabin::before {74  background: #9c6b3f;75  clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%);76}77.hammock::before {78  top: 11px;79  width: 20px;80  height: 7px;81  margin-left: -10px;82  border-bottom: 3px solid #c99a2e;83  border-radius: 0 0 10px 10px;84  background: none;85  clip-path: none;86}87.reception::before {88  width: 14px;89  height: 14px;90  margin-left: -7px;91  border-radius: 50%;92  background: #2d4a3a;93  clip-path: none;94}95.lake::before {96  top: 10px;97  width: 24px;98  height: 11px;99  margin-left: -12px;100  border-radius: 50%;101  background: #5fa8d3;102  clip-path: none;103}104.playground::before {105  width: 18px;106  margin-left: -9px;107  background: #d1495b;108  clip-path: polygon(50% 0, 100% 100%, 82% 100%, 50% 32%, 18% 100%, 0 100%);109}110aside {111  padding: 12px 16px;112  background: #e4ecd6;113}114aside h2 {115  margin: 4px 0 8px;116  font-size: 1.05rem;117}118.card {119  padding: 4px 16px;120  border-radius: 12px;121  background: #ffffff;122  box-shadow: 0 1px 2px rgb(31 42 34 / 0.08);123}124.card h2 {125  font-size: 1.15rem;126}127footer {128  padding: 12px 16px;129  background: #2d4a3a;130  color: #ffffff;131}

camping.example