Basic Grid CSS [ Cross Browser ]

by Rian .N Herdian

HTML

<div>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
</div>

CSS

* {
  margin:0;
  padding:0;
}
div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
  padding:10px;
}
@media(max-width:480px) {
  div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    grid-gap: 10px;
    padding:10px;
  }
}
div figure {
  display:block;
  padding-top:100%;
  width:100%;
  background:#333;
}