grid cells start & end

Диапазоны ячеек сетки

^{repeat()
grid-column-start
grid-column-end
grid-row-start
grid-row-end}

2

Создадим класс grid-container:

.grid-container {
    margin: 0;
    box-sizing: border-box;
    display: grid;
    grid-gap: 0;
    grid-template-columns: repeat(100, 1vw);
    grid-template-rows: repeat(100, 1vh);
}

Обратите внимание, что мы использовали функцию repeat() для создания сетки

^{С помощью grid-template-columns: repeat(100, 1vw) мы указали число колонок сетки ( 100 ) и ширину каждой ячейки ( 1vw )}

^{С помощью grid-template-rows: repeat(100, 1vh) мы указали число строк сетки ( 100 ) и высоту каждой ячейки ( 1vh )}

Теперь вставим на страницу элемент main, который будет контейнером сетки:

<main class="grid-container">
</main>

Мы знаем, что в нашей сетке 100 * 100 = 10 000 ячеек

Вставим в контейнер main элемент div

<main class="grid-container">
   <div style="grid-column-start: 20;
               grid-column-end: 80;
               grid-row-start: 10;
               grid-row-end: 40;
               background-color: #09b;">
   </div>
</main>

Обратите внимание на атрибуты стиля элемента:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

Эти атрибуты позволили нам точно указать ячейки сетки, которые будет занимать элемент

Элемент заннял ячейки начиная с 20-ой колонки и 10-ой строки сетки и до 80-ой колонки и 40-ой строки сетки

Аналогичным образом вставим в контейнер еще несколько элементов:

html

<main class="grid-container">
   <div style="grid-column-start: 20;
               grid-column-end: 80;
               grid-row-start: 10;
               grid-row-end: 40;
               background-color: #09b;" class="">
   </div>
   <div style="grid-column-start: 10;
               grid-column-end: 15;
               grid-row-start: 10;
               grid-row-end: 90;
               background-color: green;" class="">
   </div>
   <div style="grid-column-start: 15;
               grid-column-end: 20;
               grid-row-start: 10;
               grid-row-end: 90;
               background-color: magenta;" class="">
   </div>
   <div style="grid-column-start: 20;
               grid-column-end: 80;
               grid-row-start: 40;
               grid-row-end: 90;
               background-color: yellow;" class="">
   </div>
   <div style="grid-column-start: 80;
               grid-column-end: 85;
               grid-row-start: 10;
               grid-row-end: 90;
               background-color: orange;" class="">
   </div>
   <div style="grid-column-start: 85;
              grid-column-end: 90;
              grid-row-start: 10;
              grid-row-end: 90;
              background-color: green;" class="">
   </div>
</main>

и посмотрим, что у нас получилось:

CSS

.grid-container {
    margin: 0;
    box-sizing: border-box;
    display: grid;
    grid-gap: 0;
    grid-template-columns: repeat(100, 1vw);
    grid-template-rows: repeat(100, 1vh);
}

.animated {
  display: block;
  position: relative;
  bottom: -10%;
  color: yellow;
  font-size: 4vw;
}

.first {
  animation: first 4s ease-in-out infinite;
}

.second {
  animation: second 4s ease-in-out 2s infinite;
}

/* ==================== first ==================== */
@-webkit-keyframes first {
  0% { top: 100%; opacity: 0; }
  50% { opacity: 1; }
  100% { top: 0%; opacity: 0; }
}
@keyframes first {
  0% { top: 100%; opacity: 0; }
  50% { opacity: 1; }
  100% { top: 0%; opacity: 0; }
}
/* ==================== second ==================== */
@-webkit-keyframes second {
  0% { top: 0%; opacity: 0; }
  50% { opacity: 1; }
  100% { top: 90%; opacity: 0; }
}
@keyframes second {
  0% { top: 0%; opacity: 0; }
  50% { opacity: 1; }
  100% { top: 90%; opacity: 0; }
}