БЛОГ НА HUSL


Как сделать колонки в css

Автор вопроса: Gondarech

Как сделать такие колонки в css с картинки?введите сюда описание изображения


Источник

Ответы (3 шт):

Автор решения: NTA

Код:

.plate {
  border: 0px;
  border-radius: 15px;
  padding: 10px;
  height: 50px;
  width: 50px;
  margin-left: 30px;
  margin-bottom: 30px;
  background-color: lightgrey;
}
<img class="plate" src="2.png">
<img class="plate" src="2.png">
<img class="plate" src="2.png">
<img class="plate" src="2.png">
<img class="plate" src="2.png"><br>
<img class="plate" src="2.png">
<img class="plate" src="2.png">
<img class="plate" src="2.png">
<img class="plate" src="2.png">
<img class="plate" src="2.png"><br>
<img class="plate" src="2.png">
<img class="plate" src="2.png">

Результат: Результат

Вместо 2.png поставьте ссылку на изображение, которое будет показываться в колонке.

→ Ссылка
Автор решения: De.Minov

Вариант при помощи Flexbox:

.grid-images {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  width: 500px;
}

.grid-images__item {
  display: block;
  width: calc((100% - 20px * 3) / 4);
  height: auto;
  aspect-ratio: 1;
  border-radius: 10px;
  background-color: #ccc;
  padding: 5px;
  box-sizing: border-box;
}

.grid-images__item img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  -o-object-fit: cover;
  object-fit: cover;
}
<div class="grid-images">
  <div class="grid-images__item">
    <img src="https://i.imgur.com/vZtKnFh.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/OuM2dhD.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/vZtKnFh.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/frcp0Gh.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/frcp0Gh.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/MFxNM9f.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/mkHlr6R.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/mkHlr6R.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/OuM2dhD.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/vZtKnFh.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/mkHlr6R.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/fzx2iaB.png" alt="" />
  </div>
</div>

Вариант на Grid Layout:

.grid-images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 500px;
}

.grid-images__item {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 10px;
  background-color: #ccc;
  padding: 5px;
  box-sizing: border-box;
}

.grid-images__item img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  -o-object-fit: cover;
  object-fit: cover;
}
<div class="grid-images">
  <div class="grid-images__item">
    <img src="https://i.imgur.com/vZtKnFh.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/OuM2dhD.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/vZtKnFh.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/frcp0Gh.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/frcp0Gh.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/MFxNM9f.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/mkHlr6R.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/mkHlr6R.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/OuM2dhD.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/vZtKnFh.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/mkHlr6R.png" alt="" />
  </div>
  <div class="grid-images__item">
    <img src="https://i.imgur.com/fzx2iaB.png" alt="" />
  </div>
</div>

Ну и на крайний случай, вариант на Table

.grid-images {
  width: 500px;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  box-sizing: border-box;
}

.grid-images td {border: 0;}

.grid-images tr:not(:first-child) td {padding-top: 10px;}
.grid-images tr:not(:last-child) td  {padding-bottom: 10px;}
.grid-images tr td:not(:first-child) {padding-left: 10px;}
.grid-images tr td:not(:last-child)  {padding-right: 10px;}

.grid-images__item {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 10px;
  background-color: #ccc;
  padding: 5px;
  box-sizing: border-box;
}

.grid-images__item img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  -o-object-fit: cover;
  object-fit: cover;
}
<table class="grid-images">
  <tr>
    <td>
      <div class="grid-images__item">
        <img src="https://i.imgur.com/MFxNM9f.png" alt="" />
      </div>
    </td>
    <td>
      <div class="grid-images__item">
        <img src="https://i.imgur.com/vZtKnFh.png" alt="" />
      </div>
    </td>
    <td>
      <div class="grid-images__item">
        <img src="https://i.imgur.com/mkHlr6R.png" alt="" />
      </div>
    </td>
    <td>
      <div class="grid-images__item">
        <img src="https://i.imgur.com/OuM2dhD.png" alt="" />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="grid-images__item">
        <img src="https://i.imgur.com/OuM2dhD.png" alt="" />
      </div>
    </td>
    <td>
      <div class="grid-images__item">
        <img src="https://i.imgur.com/dYzvxE8.png" alt="" />
      </div>
    </td>
    <td>
      <div class="grid-images__item">
        <img src="https://i.imgur.com/dYzvxE8.png" alt="" />
      </div>
    </td>
    <td>
      <div class="grid-images__item">
        <img src="https://i.imgur.com/fzx2iaB.png" alt="" />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="grid-images__item">
        <img src="https://i.imgur.com/mkHlr6R.png" alt="" />
      </div>
    </td>
    <td>
      <div class="grid-images__item">
        <img src="https://i.imgur.com/OuM2dhD.png" alt="" />
      </div>
    </td>
    <td>
      <div class="grid-images__item">
        <img src="https://i.imgur.com/fzx2iaB.png" alt="" />
      </div>
    </td>
    <td>
      <div class="grid-images__item">
        <img src="https://i.imgur.com/frcp0Gh.png" alt="" />
      </div>
    </td>
  </tr>
</table>

→ Ссылка
Автор решения: puffleeck

раз уж пошла такая пьянка, вот вам и "отзывчивый" грид(это не какой то там "адаптив" с его фиксированными бейкпойнтами, тут все тянется)

в качестве пояснений можете почитать это: https://habr.com/ru/articles/786104/

и это: https://habr.com/ru/companies/edison/articles/344878/

#x{
display: grid;
grid-gap: 2.5em;
grid-template-columns: repeat(auto-fit, minmax(15vmax, 1fr));
grid-template-rows: repeat(auto-fit, minmax(10vmin, 1fr));
width: 100%;
}

#x > *{
 background: gray;
 border: 5px solid orange;
 border-radius: 1vmax;
 height: 100%;
 width: 100%;
}
<div id='x'>
  <img src='#'> <img src='#'> <img src='#'>
  <img src='#'> <img src='#'> <img src='#'>
  <img src='#'> <img src='#'> <img src='#'>
  <img src='#'> <img src='#'> <img src='#'>
  <img src='#'> <img src='#'> <img src='#'>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.