Макет с системной сеткой - PullRequest
Новая
       5

Макет с системной сеткой

0 голосов
/ 08 февраля 2020

код: 

<GridContainer>
  <NewsWrapper />
  <News2Wrap>
    <div>a</div>
    <div>b</div>
    <div>c</div>
  </News2Wrap>
</GridContainer>

css: 

export const GridContainer = styled.div`
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1.42fr;
  grid-column-gap: 10px;
  grid-row-gap: 15px;
  margin-top: 50px;
  background: red;
  height: 500px;
`;
export const NewsWrapper = styled.div`
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 15px;
  grid-row: 1/2;
  background: yellow;
`;

export const News2Wrap = styled.div`
  width: 100%;
  display: grid;
  grid-template-columns: 40% 60%;
  grid-column-gap: 5px;
  grid-row-gap: 15px;
  grid-row: 2;
  background: orange;
  & > div:nth-child(1) {
    grid-row: 1/4;
    grid-column: 1;
    background: green;
  }
  & > div:nth-child(2) {
    grid-row: 1/2;
    grid-column: 2;
    background: blue;
  }
  & > div:nth-child(3) {
    grid-row: 2/4;
    grid-column: 2;
    background: black;
  }
`;

Я пытаюсь создать контейнер сетки, где я могу

слева: 1 столбец 1 строка справа вверху: 1 строка 1 столбец справа внизу: 2 столбца

Я пытаюсь достичь этой цели, но у меня ничего не получается:

enter image description here

пример:

https://codesandbox.io/s/twilight-mountain-t1c1m

1 Ответ

1 голос
/ 08 февраля 2020

Если вы разделите родительскую сетку на 8 квадратов (по 2 строки, каждая из которых содержит 4 квадрата), вы можете определить области каждого элемента новостей.

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

по вертикали:

  • верх строка (ie., где будет верхняя граница родительского элемента) - это строка с номером 1 (не 0!)
  • , следующая строка - 2
  • последняя строка (ie. Где будет нижняя граница родительского элемента) сетки - это номер строки 3

по горизонтали:

  • крайняя левая строка (ie. Где левая граница родительского элемента) будет строкой 1 (не 0!)
  • следующая строка 2
  • следующая строка 3
  • следующая строка 4
  • последняя строка (ie. Где правая граница родительского элемента будет) это номер строки 5
* 105 2 * Итак, подумав о главном новостном элементе в блоке 2x2 с левой стороны ...

Он простирается от:

  • Вертикальная линия 1 до Вертикальная линия 3

и от:

  • Горизонтальная линия 1 до Горизонтальная линия 3 .

Используя формат: 

grid-area: Start Vertical Line / Start Horizontal Line / End Vertical Line / End Horizontal Line

это можно описать как: 

grid-area: 1 / 1 / 3 / 3

Пример работы: 

.parent {
  display: grid;
  grid-template-columns: 80px 80px 80px 80px;
  grid-template-rows: 80px 80px;
}

.priority-1 {
  grid-area: 1 / 1 / 3 / 3;
  background-color: rgb(191, 0, 0);
}

.priority-2 {
  grid-area: 1 / 3 / 2 / 5;
  background-color: rgb(255, 0, 0);
}

.priority-3 {
  grid-area: 2 / 3 / 3 / 4;
  background-color: rgb(255, 127, 0);
}

.priority-4 {
  grid-area: 2 / 4 / 3 / 5;
  background-color: rgb(255, 255, 0);
}
<div class="parent">
<div class="child priority-1"></div>
<div class="child priority-2"></div>
<div class="child priority-3"></div>
<div class="child priority-4"></div>
</div>
...