CSS Grid as enhancement

In this example below you will see how to do a CSS Grid as enhancement with some HTML / CSS and Javascript

CSS grid styles used as a layout enhancement for a list of items.Related References: * https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/

Thumbnail
This awesome code was written by KristinB, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright KristinB ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Grid as enhancement</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>CSS Grid as Layout Enhancement</h1>
<p>
  <strong>Browsers which do NOT support grid:</strong> List items wrap as needed to fit within the screen but there will be extra space to the right side of each row unless the items fit perfectly.
</p>
<p>
  <strong>Browsers which DO support grid:</strong> List items wrap as needed to fit but will stretch slightly so no extra space remains on the right side of rows.
</p>
<p><em>(Dotted outlines are to show underlying layout structures.)</em></p>

<ul class="my-list">
  <li>
    <img src="https://www.freelogodesign.org/img/logo-ex-7.png" alt="Acme">
  </li>
  <li>
    <img src="https://www.freelogodesign.org/img/logo-ex-7.png" alt="Acme">
  </li>
  <li>
    <img src="https://www.freelogodesign.org/img/logo-ex-7.png" alt="Acme">
  </li>
  <li>
    <img src="https://www.freelogodesign.org/img/logo-ex-7.png" alt="Acme">
  </li>
  <li>
    <img src="https://www.freelogodesign.org/img/logo-ex-7.png" alt="Acme">
  </li>
  <li>
    <img src="https://www.freelogodesign.org/img/logo-ex-7.png" alt="Acme">
  </li>
  <li>
    <img src="https://www.freelogodesign.org/img/logo-ex-7.png" alt="Acme">
  </li>
  <li>
    <img src="https://www.freelogodesign.org/img/logo-ex-7.png" alt="Acme">
  </li>
  <li>
    <img src="https://www.freelogodesign.org/img/logo-ex-7.png" alt="Acme">
  </li>
  <li>
    <img src="https://www.freelogodesign.org/img/logo-ex-7.png" alt="Acme">
  </li>
  <li>
    <img src="https://www.freelogodesign.org/img/logo-ex-7.png" alt="Acme">
  </li>
  <li>
    <img src="https://www.freelogodesign.org/img/logo-ex-7.png" alt="Acme">
  </li>
  <li>
    <img src="https://www.freelogodesign.org/img/logo-ex-7.png" alt="Acme">
  </li>
  <li>
    <img src="https://www.freelogodesign.org/img/logo-ex-7.png" alt="Acme">
  </li>
</ul>

<p>Random block element content, lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur animi cupiditate et beatae nesciunt maiores fugiat atque, temporibus saepe ducimus cumque suscipit aut doloribus eos officiis esse. Quaerat, et deserunt!</p>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/KristinB/css-grid-as-enhancement-QmaWwp */
* {
  box-sizing: border-box;
}

body {
  margin: 0 2em;
  border: 1px dotted hotpink;
  overflow-x: hidden;
  font-family: Georgia;
}

img {
  display: block;
  max-width: 100%;
  margin: auto;
}

ul {
  list-style-type: none;
  padding: 0;
}

.my-list {
  border: 1px dotted lime;
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.5em;
  margin-right: -0.5em;
  margin-bottom: -1em;
}
@supports (display: grid) {
  .my-list {
    display: grid;
    /* auto responsive columns:
      * repeat() = repeat as many columns as needed
      * autofit = Make grid items wrap if the min-width doesn't fit, expands columns as needed to take up all available space
      * minmax() = set a min-width and a max-width for columns
      * 1fr = evenly distribute extra space over the minimum width between the columns
    */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .my-list > li {
    width: auto !important;
  }
}
.my-list > li {
  border: 1px solid;
  border-radius: 5px;
  margin: 0 0.5em 1em 0.5em;
  width: 150px;
}

Comments