Помогите пожалуйста сверстать Grid/Flex сетку

Question

Помогите пожалуйста сверстать Grid/Flex сетку

Рейтинг: -1Ответов: 2Опубликовано: 11.04.2023

Как я могу сделать такую грид сетку или через flex?

css html grid flexbox

Источник: Stack Overflow на русском

Answer 1

▲ 1

Примерно как-то так, не лёгкое это дело если честно высчитывать гриды)).

.wrapper {
  display: grid;
  grid-template-columns: repeat(14, 25px);
  grid-template-rows: repeat(13, 25px);
  gap: 5px;
}
.item {
  background-color: green;
  display: block;
  width: 100%;
  height: 100%;
}
.item-1 {
  grid-column-start: 1;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 9;
  border-radius: 20px;
  background: linear-gradient(45deg, #a305b6, #d52323);
}
.item-2 {
    grid-column-start: 1;
    grid-column-end: 10;
    grid-row-start: 9;
    grid-row-end: 14;
}
.item-3 {
    grid-column-start: 6;
    grid-column-end: 10;
    grid-row-start: 1;
    grid-row-end: 5;
    border-radius: 20px;
}
.item-4 {
    grid-column-start: 6;
    grid-column-end: 10;
    grid-row-start: 5;
    grid-row-end: 9;
}
.item-5 {
    grid-column-start: 10;
    grid-column-end: 15;
    grid-row-start: 1;
    grid-row-end: 6;
}
.item-6 {
    grid-column-start: 10;
    grid-column-end: 15;
    grid-row-start: 6;
    grid-row-end: 14;
}

<div class="wrapper">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
  <div class="item item-4"></div>
  <div class="item item-5"></div>
  <div class="item item-6"></div>
</div>

Answer 2

▲ 0

Довольно простая раскладка. Для реализации, лучше всего подходит grid. Открывайте любой онлайн-генератор сеток (например, этот) и заполняйте размерами из макета.

.container {
  font: bold min(25vh, 25vw)/1em monospace; /* Оригинальный размер шрифта - 200px */
  display: grid;
  grid-template: 1em 0.3em 0.575em 1.425em / 1.425em 1em 1.425em;
  gap: 0.125em;
}

[class^="block_"] {
  display: grid;
  place-items: center;
  box-shadow: 0 0 0.075em #000a;
  -webkit-text-stroke: 0.0075em #fff;
  color: #fff0;
}

.block_1 { grid-area: 1 / 1 / 4 / 2; background: linear-gradient(to right, #e25961, #9e5695); border-radius: 0.4em; }
.block_2 { grid-area: 1 / 2 / 2 / 3; background: linear-gradient(to top right, #9d0206, #f42a2a); border-radius: 0.35em; }
.block_3 { grid-area: 1 / 3 / 3 / 4; background: linear-gradient(to top right, #18309a, #2e5adf); }
.block_4 { grid-area: 2 / 2 / 4 / 3; background: linear-gradient(to top right, #692af5, #be66f0); }
.block_5 { grid-area: 4 / 1 / 5 / 3; background: linear-gradient(to top, #2f628d, #383584); }
.block_6 { grid-area: 3 / 3 / 5 / 4; background: linear-gradient(to top right, #3a2b88, #634dd4); }

<div class="container">
  <div class="block_1">1</div><div class="block_2">2</div><div class="block_3">3</div>
  <div class="block_4">4</div><div class="block_5">5</div><div class="block_6">6</div>
</div>

Помогите пожалуйста сверстать Grid/Flex сетку

Ответы