CSS Grid with Flexbox as fallback for old browsers

In this example below you will see how to do a CSS Grid with Flexbox as fallback for old browsers with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by MightyJoeW, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright MightyJoeW ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Grid with Flexbox as fallback for old browsers</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="listing">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

<div class="grid">
  <img src="https://pbs.twimg.com/profile_images/941141162315759616/NpY9W3no_400x400.jpg" alt="Joe Photo">
  <img src="https://pbs.twimg.com/profile_images/941141162315759616/NpY9W3no_400x400.jpg" alt="Joe Photo">
  <img src="https://pbs.twimg.com/profile_images/941141162315759616/NpY9W3no_400x400.jpg" alt="Joe Photo">
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/MightyJoeW/css-grid-with-flexbox-as-fallback-for-old-browsers-bLeoMO */
* {
  box-sizing: border-box;
}

.listing {
  display: flex;
  flex-wrap: wrap;
  margin: 0 20px;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(12, 1fr);
}
.listing div {
  background: black;
  color: white;
  width: 200px;
  height: 100px;
}

.listing > * {
  flex: 1 1 30%;
  margin: 0 20px 20px 20px;
}

@supports (display: grid) {
  .listing > * {
    margin: 0;
  }
}
.grid > img {
  float: left;
  width: 33.3%;
}

@supports (display: grid) {
  .grid > img {
    width: auto;
  }
}
.grid {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

Comments