CSS grid c использованием переменных для управления количеством строк и столбцов сетки

#html #css #css3 #html5 #svg

Я пытаюсь создать сетку, который состоит из квадратов. Четыре квадрата в каждом ряду. 
Квадраты не могут изменять размеры экрана.  

Ширина и высота квадратов должны быть все время одинаковыми  (я не хочу фиксированных
значений). При этом, я должен использовать сетку CSS.  



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

  

  

  

  

  

  

  





    

Ответы

Ответ 1

Еще один приём, где вы можете поместить любой контент внутрь, не
нарушая соотношение. Идея состоит в том, чтобы иметь сетку внутри
большого квадрата, который вы разделяете на маленькие квадраты:




.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}

.container div {
  background-color: gold;
}

body:before {
  content: "";
  display: block;
  padding-top: 100%;
}

body {
  position: relative;
  margin: 0;
}

img {
  max-width: 100%;
  max-height: 100%;
}

  

  

  

  

  

  
Можно разместить любой контент здесь
  

  
Можно разместить любой контент здесь
  
Можно разместить любой контент здесь
  

  

  

  







Другой синтаксис без position:absolute, где вы можете положиться на
функцию растяжения flexbox:  




.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
  flex-grow:1;
}

.container div {
  background-color: dodgerblue;
}

body:before {
  content: "";
  padding-top: 100%;
}

body {
  display:flex;
}

img {
  max-width: 100%;
  max-height: 100%;
}

  

  

  

  

  

  
Можно разместить любой контент здесь
  

  
Можно разместить любой контент здесь
  
Можно разместить любой контент здесь
  

  

  

  







Вы можете контролировать limit строк. Выше я сделал их 4, здесь мы
можем иметь только 2, сделав отступ 50% вместо 100%. У нас будет
большой прямоугольник внутри, где будет 8 квадратов (по 4 в каждом
ряду).




.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 5px;
  flex-grow:1;
}

.container div {
  background-color: red;
}

body:before {
  content: "";
  padding-top: 50%;
}

body {
  display:flex;
  margin: 0;
}

img {
  max-width: 100%;
  max-height: 100%;
}

  

  

  

  

  

  
Можно разместить любой контент здесь
  

 






Вы можете контролировать количество строк, используя переменные CSS:  




:root {
  --n:6;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(var(--n),1fr);
  grid-gap: 5px;
  flex-grow:1;
}

.container div {
  background-color: greenyellow;
}

body:before {
  content: "";
  padding-top: calc(var(--n) * 25%);
}

body {
  display:flex;
}

img {
  max-width: 100%;
  max-height: 100%;
  display:block;
}

   

  
Можно разместить любой контент здесь
  

  
Можно разместить любой контент здесь
  
Можно разместить любой контент здесь
  

  
Можно разместить любой контент здесь
  

  

  
Можно разместить любой контент здесь
  

  
Можно разместить любой контент здесь>
  
Можно разместить любой контент здесь
  

  

  

  

  
Можно разместить любой контент здесь
  

  
Можно разместить любой контент здесь
  

  

 






Мы также можем добавить элемент управления количеством столбцов,
добавив еще одну переменную, чтобы иметь что-то более общее:  




:root {
  --n:6;
  --m:6;
}

.container {
  display: grid;
  grid-template-columns: repeat(var(--m),1fr);
  grid-template-rows: repeat(var(--n),1fr);
  grid-gap: 5px;
  flex-grow:1;
}

.container div {
  background-color: purple;
}

body:before {
  content: "";
  padding-top: calc(var(--n)/var(--m) * 100%);
}

body {
  display:flex;
}

img {
  max-width: 100%;
  max-height: 100%;
}

   

  

  

  

  

  

  
Можно разместить любой контент здесь
  

  

  
Можно разместить любой контент здесь
  

  
Можно разместить любой контент здесь>
  

  

  

  

  

  
Можно разместить любой контент здесь
  

  
Можно разместить любой контент здесь
  

  

 





Примеры адаптивны и работают во всех браузерах.

Источник ответа: @Temani Afif


Ответ 2

Растровые, векторные изображения + текст

Всё расположено в одной CSS сетке.  

Векторные и растровые изображения добавляются с помощью одного и того же тега 



.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}

.container div {
  background-color: #E3EAF0;
}

body:before {
  content: "";
  display: block;
  padding-top: 100%;
}

body {
  position: relative;
  margin: 0;
}

img {
  max-width: 100%;
  max-height: 100%;
}

  

  

  

  

  

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt
dignissim nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis posuere
quam laoreet. Vestibulum fringilla porttitor felis, non lacinia dolor mattis vitae.
Donec gravida et purus eu pellentesque. Nam consequat nisl id velit interdum eleifend.
Mauris nulla turpis, sollicitudin in vestibulum nec, ornare quis lacus. Proin eros
diam, lacinia id blandit a, efficitur eget mauris. Morbi ullamcorper velit non urna
malesuada molestie. Orci varius natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec vehicula est non nunc ultricies, sit amet pharetra nulla
congue. Vestibulum hendrerit ante ac rhoncus aliquet. Quisque vitae est turpis. Nulla
sit amet felis nec nisl blandit mollis.
  

  
Nullam ornare turpis quis orci hendrerit, vitae varius est tincidunt. In quis
malesuada tellus. Aliquam nunc mauris, aliquam quis lectus ut, ultrices lobortis ante.
Maecenas tincidunt ligula felis, in consequat lectus finibus eget. Maecenas molestie
placerat odio, at malesuada risus consequat id. Integer congue facilisis enim porta
pretium. Morbi scelerisque tincidunt purus, vitae rhoncus tortor tristique nec. Nullam
laoreet turpis nec felis vehicula finibus.
  
Fusce ultricies maximus ante vitae imperdiet. Proin magna orci, pretium nec
pretium id, ultricies in risus. Praesent mauris ipsum, semper nec convallis sit amet,
vestibulum non enim. Quisque volutpat nulla ac nulla venenatis, ac cursus nulla laoreet.
Aliquam malesuada dui a orci tristique tristique. Phasellus fringilla, velit eget ultrices
efficitur, justo lacus elementum lorem, nec convallis augue lacus non dui. Aliquam
erat volutpat. Mauris sagittis, sapien in tristique mollis, ex libero laoreet magna,
ut pellentesque dolor augue accumsan elit. Nunc ut augue at eros sollicitudin malesuada.
Pellentesque urna felis, posuere sit amet odio et, vestibulum aliquet ex. Nulla eu
dolor blandit, bibendum nibh in, tincidunt ex. Ut nisl justo, tincidunt a augue et,
gravida sollicitudin neque. Donec id dignissim elit, a sollicitudin leo. Aliquam placerat
orci justo, et faucibus nibh volutpat vel.