фиксированный столбец сетки при других изменениях - PullRequest
Новая
       7

фиксированный столбец сетки при других изменениях

0 голосов
/ 17 ноября 2018

У меня сложная сетка с двумя столбцами, например, только одна ее часть.Мой полный код похож на это.Есть ли способ, с сеткой CSS, зеленое поле всегда будет оставаться рядом с красным, без какого-либо фиксированного размера.если в правом элементе столбца содержится больше содержимого, чем в левом первом элементе, я хочу, чтобы блок D и блок B были рядом друг с другом без пробелов. 

.container {
  display: grid;
  grid-template-areas: "d c" "b a";
  grid-column-gap: 16px;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
}

.a {
  grid-area: a;
  background-color: blue;
}

.b {
  grid-area: b;
  background-color: green;
}

.c {
  grid-area: c;
  background-color: purple;
}

.d {
  grid-area: d;
  background-color: red;
}

.block {
  /* height:300px; */
}
<div class="container">
  <div class="block a">
    Lorem ipsum dolor sit amet.
  </div>
  <div class="block b">
    Lorem ipsum dolor sit amet, consectetur adipisicing.
  </div>
  <div class="block c">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quod ea aperiam consequatur fugiat libero voluptate accusantium amet corporis laborum in, quae ratione, atque assumenda. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
    enim labore, eaque quidem repellendus atque!
  </div>
  <div class="block d">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae blanditiis laudantium sit, pariatur omnis quibusdam?
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 17 ноября 2018

вы можете использовать
grid-auto-row: minmax (100px, auto) в классе контейнера и удалите
align-items: baseline; который может помочь вам с этим 

.container {
  display: grid;
  grid-template-areas:  "d c" "b a";
  grid-column-gap: 16px;
  grid-template-columns: 1fr 1fr;
  /*align-items: baseline;*/
  grid-auto-rows: minmax(100px, auto);
}

.a {

  grid-area: a;
  background-color: blue;
}

.b {
  grid-area: b;
  background-color: green;
}

.c {
  grid-area: c;
  background-color: purple;
}

.d {
  grid-area: d;
  background-color: red;
}

.block {
  /* height:300px; */
<!DOCTYPE html>
<html>
<head>
<title>Web Page Design</title>
</head>
<body>
<div class="container">
  <div class="block a">
    Lorem ipsum dolor sit amet.
    
  </div>
  <div class="block b">
    Lorem ipsum dolor sit amet, consectetur adipisicing.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quod ea aperiam consequatur fugiat libero voluptate accusantium amet corporis laborum in, quae ratione, atque assumenda. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
    enim labore, eaque quidem repellendus atque!
    
  </div>
  <div class="block c">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quod ea aperiam consequatur fugiat libero voluptate accusantium amet corporis laborum in, quae ratione, atque assumenda. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
    enim labore, eaque quidem repellendus atque!
  </div>
  <div class="block d">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae blanditiis laudantium sit, pariatur omnis quibusdam?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quod ea aperiam consequatur fugiat libero voluptate accusantium amet corporis laborum in, quae ratione, atque assumenda. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
    enim labore, eaque quidem repellendus atque!
  </div>
</div>
</body>
</html>
0 голосов
/ 17 ноября 2018

Тинкер с grid-template-areas.Вот пример. 

.container {
  display: grid;
  grid-template-areas: " d c "
                       " b c "
                       " . c "
                       " . a "
                       " . a "
                       " . a ";
  grid-column-gap: 16px;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
}

.a {
  grid-area: a;
  background-color: blue;
}

.b {
  grid-area: b;
  background-color: green;
}

.c {
  grid-area: c;
  background-color: purple;
}

.d {
  grid-area: d;
  background-color: red;
}

.block {
  /* height:300px; */
}
<div class="container">
  <div class="block a">
    Lorem ipsum dolor sit amet.
  </div>
  <div class="block b">
    Lorem ipsum dolor sit amet, consectetur adipisicing.
  </div>
  <div class="block c">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quod ea aperiam consequatur fugiat libero voluptate accusantium amet corporis laborum in, quae ratione, atque assumenda. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
    enim labore, eaque quidem repellendus atque!
  </div>
  <div class="block d">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae blanditiis laudantium sit, pariatur omnis quibusdam?
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...