CodePen Embed - Grid & Flex

<div class="new-version">
  <a class="new-versin__link" href="https://codepen.io/main-artem/pen/poPRyaK" target="blank">Новая версия тут (click)</a>
</div>

<div class="wrapper">
  <!-- Flex grow -->
  <div class="wrap">
    <div class="wrap__title">Flex grow (column)</div>
    <div class="box flex-grow">
      <div class="item flex-grow__item">
        <div class="flex-grow__head">Head</div>
        <div class="flex-grow__content">
          Lorem, ipsum.
        </div>
        <button class="item__btn item__btn--left">Button</button>
      </div>
      <div class="item flex-grow__item">
        <div class="flex-grow__head">Head</div>
        <div class="flex-grow__content">
          Lorem ipsum dolor sit amet consectetur.
        </div>
        <button class="item__btn">Button</button>
      </div>
      <div class="item flex-grow__item">
        <div class="flex-grow__head">Head</div>
        <div class="flex-grow__content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. 
          Odio, ipsam?
        </div>
        <button class="item__btn item__btn--right">Button</button>
      </div>
    </div>
  </div>
<!-- align center -->
  <div class="wrap">
    <div class="wrap__title">Align center</div>
    <div class="box align">
      <div class="item align__item align__item--start">Logo</div>
      <div class="item align__item align__item--center">
        <form action="/search" class="search">
          <input class="search__input" id="search-input" type="text" required>
          <label class="search__label" for="search-input">Search here</label>
          <button class="search__button" type="submit" aria-label="submit"></button>
        </form>
      </div>
      <div class="item align__item align__item--end">
        <nav class="nav">
          <ul class="nav__list">
            <li class="nav__item">Item</li>
            <li class="nav__item">Item</li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
  <!-- Responsive card -->
  <div class="wrap">
    <div class="wrap__title">Responsive card (no @media)</div>
    <div class="box card-wrap">
      <div class="item card__image">
        <img src="https://i.ibb.co/JkfbqcL/Avatar.jpg" alt="image">
      </div>
      <div class="item card__body">
        <h3>Lorem, ipsum dolor.</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur eos adipisicing elit. 
          Consectetur, eos aut consequatur sit at nesciunt blanditiis 
          tempore sequi vero in repellat.
        </p>
        <a href="/" class="card__link">Read more</a>
      </div>
    </div>
  </div>
  <!-- Position -->
  <div class="wrap">
    <div class="wrap__title">Positon align</div>
    <div class="box Position">
      <div class="item Position__item Position__item--flex">
        <p>flex</p>
      </div>
      <div class="item Position__item Position__item--place">
        <p>Place</p>
      </div>
      <div class="item Position__item Position__item--grid">
        <p>grid</p>
      </div>
      <div class="item Position__item Position__item--absolute">
        <p>absolute</p>
      </div>
    </div>
  </div>
  <!-- Flex wrap -->
  <div class="wrap">
    <div class="wrap__title">Flex wrap</div>
    <div class="box flex-wrap">
      <div class="item flex-wrap__item"></div>
      <div class="item flex-wrap__item"></div>
      <div class="item flex-wrap__item"></div>
      <div class="item flex-wrap__item"></div>
    </div>
  </div>
  <!-- Flex gap (margin)-->
  <div class="wrap">
    <div class="wrap__title">Flex gap (margin)</div>
    <div class="box flex-gap">
      <div class="item flex-gap__item"></div>
      <div class="item flex-gap__item"></div>
      <div class="item flex-gap__item"></div>
      <div class="item flex-gap__item"></div>
    </div>
  </div>
  <!-- Grid gap -->
  <div class="wrap">
    <div class="wrap__title">Grid wrap</div>
    <div class="box grid-wrap">
      <div class="item grid-wrap__item"></div>
      <div class="item grid-wrap__item"></div>
      <div class="item grid-wrap__item"></div>
      <div class="item grid-wrap__item"></div>
    </div>
  </div>
  <!-- Subgrid (contents) -->
  <div class="wrap">
    <div class="wrap__title">Subgrid (contents)</div>
    <div class="box subgrid">
      <div class="item subgrid__item">
        <div class="subgrid__head">
          Head
        </div>
        <div class="subgrid__content">
          Content <br>
          Content <br>
          Content <br>
          Content <br>
        </div>
      </div>
      <div class="item subgrid__item">
        <div class="subgrid__head">
          Head <br>
          Head <br>
        </div>
        <div class="subgrid__content">
          Content <br>
          Content <br>
          Content <br>
        </div>
      </div>
      <div class="item subgrid__item">
        <div class="subgrid__head">
          Head <br>
          Head <br>
          Head <br>
        </div>
        <div class="subgrid__content">
          Content <br>
          Content <br>
        </div>
      </div>
    </div>
  </div>
  <!-- Masonry (column-count) -->
  <div class="wrap">
    <div class="wrap__title">Masonry (column-count)</div>
    <div class="box masonry">
      <div class="masonry__item">
        <div class="item">
          Lorem ipsum dolor sit amet.
        </div>
      </div>
      <div class="masonry__item">
        <div class="item">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Maiores, quaerat!
        </div>
      </div>
      <div class="masonry__item">
        <div class="item">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </div>
      </div>
      <div class="masonry__item">
        <div class="item">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </div>
      </div>
      <div class="masonry__item">
        <div class="item">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Delectus inventore atque quo.
        </div>
      </div>
      <div class="masonry__item">
        <div class="item">
          Lorem ipsum dolor sit amet.
        </div>
      </div>
    </div>
  </div>
  <!-- Grid area / span -->
  <div class="wrap">
    <div class="wrap__title">Grid area / span</div>
    <div class="box grid-span">
      <div class="item grid-span__item"></div>
      <div class="item grid-span__item"></div>
      <div class="item grid-span__item"></div>
      <div class="item grid-span__item"></div>
      <div class="item grid-span__item"></div>
    </div>
  </div>
  <!-- Grid dense -->
  <div class="wrap">
    <div class="wrap__title">Grid dense</div>
    <div class="box grid-dense">
      <div class="item grid-dense__item"></div>
      <div class="item grid-dense__item"></div>
      <div class="item grid-dense__item"></div>
      <div class="item grid-dense__item"></div>
      <div class="item grid-dense__item"></div>
      <div class="item grid-dense__item"></div>
      <div class="item grid-dense__item"></div>
    </div>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

body {
  background-color: #21c666;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #707070;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 600px;
  margin: 0 auto;
  &:last-child {
    margin-bottom: 50px;
  }
}

.wrap__title {
  margin: 30px 0 10px;
  font-size: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}

.box {
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.2);
}

.item {
  padding: 10px;
  min-height: 50px;
  background-color: white;
}

.item__btn {
  padding: 5px 15px;
  border: 0;
  color: white;
  background-color: cornflowerblue;
  cursor: pointer;
  &--left {
    align-self: flex-start;
  }
  &--right {
    align-self: flex-end;
  }
}

// ===== Flex grow ===== //
.flex-grow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.flex-grow__item {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  flex: 1 0 150px;
  gap: 10px;
}

.flex-grow__content {
  padding: 10px;
  margin: 0 -10px;
  background-color: #f1f1f1;
  // Тянем этот контент на всю высоту и прижимаем блок ниже к полу.
  flex: 1 0 auto; // <-- Магия тут.
}

// ===== Align center ===== //
.align {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.align__item {
  display: flex;
  align-items: center;
  &--start {
    // Давит на center слева
    flex: 1;
  }
  &--center {
    // start и end блоки давят с обоих краёв центрируя его.
    // center не сжимается и не расширяется.
    flex: 0 0 170px;
  }
  &--end {
    // Давит на center справа
    flex: 1;
    // Прижимает содержимое к правому краю
    justify-content: flex-end;
  }
}

.nav__list {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nav__item {
  padding: 5px 10px;
  color: white;
  background-color: silver;
  &:not(:last-child) {
    margin-right: 5px; // Отступ для всех item'ов в списке кроме последнего.
  }
}

.search {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.search__input {
  width: 100%;
  padding: 5px 30px 5px 10px;
  border: 1px dashed gainsboro;
  &:focus ~ .search__label,
  &:valid ~ .search__label {
    transform: translateY(-100%);
    opacity: 0;
  }
  &:focus-visible {
    outline: 0;
    border: 1px solid cornflowerblue;
  }
}

.search__label {
  position: absolute;
  left: 10px;
  opacity: 1;
  pointer-events: none;
  transition: transform 0.7s, opacity 0.5s;
}

.search__button {
  position: absolute;
  width: 12px;  height: 12px;
  right: 12px; top: 50%;
  border: 0; padding: 0;
  cursor: pointer;
  border-radius: 50%;
  transform: translateY(-65%);
  border: 2px solid gainsboro;
  background-color: white;
  &::before {
    content: "";
    position: absolute;
    width: 2px; height: 7px;
    bottom: -6px; right: -2px;
    transform: rotate(-45deg);
    background-color: gainsboro;
  }
}

// ===== Responsive card ===== //
.card-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card__image {
  flex: 1 0 150px;
  height: 150px; // изменить если текст превышает 150px
  // @media чтобы управлять размером в вертикальном положении
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1 0 70%;
  & h3 {
    font-size: 14px;
    margin: 0;
  }
  & p {
    flex: 1 0 auto;
  }
}

.card__link {
  align-self: flex-start;
  color: cornflowerblue;
}

// ===== Position ===== //
.Position {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.Position__item {
  flex: 1 0 100px;
  height: 150px;
  color: white;
  & p {
    margin: 0;
    padding: 5px 15px;
  }
  &--flex {
    display: flex;
    align-items: center;
    justify-content: center;
    & p {
      background-color: sandybrown;
    }
  }
  &--place {
    display: grid;
    place-content: center;
    & p {
      background-color: blueviolet;
    }
  }
  &--grid {
    display: grid;
    align-items: center;
    justify-content: center;
    & p {
      background-color: salmon;
    }
  }
  &--absolute {
    position: relative;
    & p {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background-color: darkseagreen;
    }
  }
}

// ===== Flex wrap ===== //
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.flex-wrap__item {
  flex: 1 0 150px;
  // flex-grow: 1; - Растягиваться
  // flex-shrink: 0; - Не сжиматься
  // flex-basis: 150px; - Ширина
}

// ===== Flex gap ===== //
.flex-gap {
  display: flex;
  flex-wrap: wrap;
  padding: 5px; // (margin: 5px) + (padding: 5px) = 10px отступ.
  // margin: -5px; // Если нет нужды в отступах обертки.
}

.flex-gap__item {
  margin: 5px; // item + item = 10px
  flex: 1 0 150px;
}

// ===== Grid wrap ===== //
.grid-wrap {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

// ===== Subgrid (contents) ===== //
.subgrid {
  display: grid;
  column-gap: 10px;
}

.subgrid__item {
  display: contents; // <-- Магия тут.
  & > div {
    // Подражаем врапперу т.к. item перестал быть самостоятельным.
    padding: 10px;
    background-color: white;
  }
  @media (max-width: 426px) {
    display: block;
    &:not(:last-child) {
      margin-bottom: 10px;
    }
  }
}

.subgrid__head {
  grid-row: 1;
  border-bottom: 1px dashed #dedede;
}

// ===== Masonry (columns) ===== //
.masonry {
  column-count: 3;
  column-gap: 0;
  padding: 5px; // Компеннсируем 5px от +5px .masonry__item
  @media (max-width: 426px) {
    column-count: 2;
  }
  @media (max-width: 321px) {
    column-count: 1;
  }
}

.masonry__item {
  // Дополнительная обертка ради отступов
  padding: 5px; // Отступы между блоками
  break-inside: avoid;
  min-height: unset;
}

// ===== Grid area / span ===== //
.grid-span {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  // (2, 1fr) = 50% / 50% в 2 колонки
  // grid-template-columns: 1fr 1fr;
  // grid-template-columns: 50% 50%;
}

.grid-span__item {
  &:nth-of-type(5) {
    grid-area: 1 / -1 / span 4/2;
    // grid-row-start: 1;
    // grid-column-start: -1;
    // grid-row-end: span 4;
    // grid-column-end: 2;
  }
}
// ===== Grid dense ===== //
.grid-dense {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
  grid-auto-flow: row dense; // - магия тут (затыкает дырки)
}

.grid-dense__item {
  &:nth-of-type(1) {
    grid-column: span 2;
    grid-row: span 2;
  }
  &:nth-of-type(3) {
    grid-row: span 2;
  }
  &:nth-of-type(5) {
    grid-column: span 2;
  }
}

.new-version {
  display: flex;
  justify-content: center;
}

.new-versin__link {
  color: white;
  font-size: 24px;
  padding: 14px 20px;
  margin: 20px;
  text-decoration: none;
  border-radius: 3px;
  background-color: tomato;
  &:hover {
    opacity: .8;
  }
}

View Compiled

This Pen is owned by Toney on CodePen.

See more by @main-artem on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.