CSS-grid квадратные ячейки

@ARTx256 · Регистрация: 17.11.2020

Author24 — интернет-сервис помощи студентам

Здравствуйте. Изучаю CSS-grid.

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
.box {
    background-color: #0ff;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin: 0 auto;
    max-width: 1024px;
}
 
.item {
    background-color: #ff0;
}

HTML5

<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
</div>

Количество .item может варьироваться.
Как сделать, чтобы ячейки сетки были квадратными (ширина равна высоте)?

@mrtoxas · 24.05.2021, 01:26

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
.box {
  background-color: #0ff;
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin: 0 auto;
  max-width: 1024px;
}
 
.item {
  background-color: #ff0;
  width: 100%;  
  padding-bottom: 100%;
}

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
.box {
  background-color: #0ff;
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin: 0 auto;
  max-width: 1024px;
}
 
.item {
  background-color: #ff0;
  width: 100%;
}
.item:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0;
  padding-bottom: 100%;
}

	24.05.2021, 01:26

CSS-grid квадратные ячейки

Решение