html - CSS сетка квадратный макет

css3 css-grid (3)

** @ ответ fcalderan решает проблему и все кредиты защищены. **

Это, очевидно, нарушает квадратную форму, но если вы будете использовать любой текст, небольшая корректировка будет работать в вашу пользу. Вы могли бы скорее использовать ::after чтобы не сдавливать и не разделять потенциальный контент. Изменение display: block также устраняет необходимость vertical-aling: top насколько я знаю.

Чтобы в дальнейшем сохранить соотношение сторон при использовании текста, я бы сделал положение текста position: absolute .

Смотрите фрагмент ниже при использовании ::before vs. ::after чтобы проиллюстрировать мою точку зрения.

.container,
.container2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}

.container div::before {
  content: "";
  padding-bottom: 100%;
  display: inline-block;
  vertical-align: top;
}

.container2 div::after {
  content: "";
  padding-bottom: 100%;
  display: block;
}

.container2 .text {
  position: absolute;  
}

.container2 div {
  background-color: green;
  position: relative;
  overflow: hidden;
}

<div class="container">
  <div>
    <div class="text">Here is some text.</div>
  </div>
  <div>
    <div class="text">Here is some more text.</div>
  </div>
  <div>
    <div class="text">Here is some longer text that will break how this looks.</div>
  </div>
</div>
  
  <hr>
  <div class="container2">
  <div>
    <div class="text">Here is some text.</div>
  </div>
  <div>
    <div class="text">Here is some more text.</div>
  </div>
  <div>
    <div class="text">Here is some longer text that will break how this looks.</div>
  </div>
</div>

На этот вопрос уже есть ответ здесь:

Макет сетки с адаптивными квадратами 3 ответа

Я пытаюсь создать сетку / макет состоит из квадратов. Четыре квадрата в каждом ряду. Квадраты не могут искажать размеры экрана. Ширина и высота должны быть одинаковыми все время (я не хочу фиксированных значений). Я должен использовать сетку CSS. Может кто-нибудь мне помочь ?

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Для забавы, любопытства поведения grid и чтобы избежать псевдоэлемента,

Вы также можете установить высоту, равную ширине вашего контейнера сетки, система сетки будет автоматически растягивать строки.

Хорошее напоминание:

https://css-tricks.com/snippets/css/complete-guide-grid/

и примеры https://gridbyexample.com/

рабочий пример, если ваша сетка использует всю ширину браузера

  * {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  height: calc(50vw - 5px);  /*instead playing around with grid gap gap */
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.container div {
  /* bg to show i'm squarred or not ? */
  background-image: linear-gradient( 45deg, transparent 50%, rgba(0, 0, 0, 0.5) 50%);
 
 margin: 0 5px 5px 0;  /*instead playing around with grid gap gap */
  background-color: red;
}


/* extra for demo, not needed */

.container {
  counter-reset: test;
}

.container div {
  display: flex;  /* or grid */
}

.container div:before {
  counter-increment: test;
  content: 'Div N°:'counter(test)' -';
  margin: auto;/* center me */
  color: yellow;

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Codepen, чтобы раскошелиться или поиграть с

Только с CSS вы можете использовать псевдоэлемент, чтобы всегда сохранять соотношение сторон 1:1 , например

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}

.container div::before {
  content: "";
  padding-bottom: 100%;
  display: inline-block;
  vertical-align: top;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>