On gists

5 Responsive Layouts (KP)

CSS CSS trick

code.css Raw #

/* https://codepen.io/kevinpowell/full/vYvEdWG */


.cluster {
  outline: 5px solid hotpink;
  padding: 1rem;

  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.flexible-grid {
  outline: 5px solid hotpink;
  padding: 1rem;

  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flexible-grid > * {
  flex: 1;
}

.auto-grid {
  outline: 5px solid hotpink;
  padding: 1rem;

  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
}

.reel {
  outline: 5px solid hotpink;
  padding: 1rem;

  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
  grid-auto-columns: 45%;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-padding: 1rem;
}

.reel > * {
  scroll-snap-align: start;
}

.main-with-sidebar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1em;
  max-width: 1200px;
  margin-inline: auto;
}

.main-with-sidebar > :first-child {
  flex-basis: 500px;
  flex-grow: 9999;
}
.main-with-sidebar > :last-child {
  flex-basis: 300px;
  flex-grow: 1;
}