Скрытие левого столбца в сетке CSS - PullRequest
Новая
       5

Скрытие левого столбца в сетке CSS

3 голосов
/ 10 февраля 2020

У меня есть несколько div элементов: 

<main>
    <div id="top">Top</div>
    <div id="left">Left</div>
    <div id="right">Right</div>
</main>

, которые я хотел бы показать в сетке: 

┌─────────────────┐
│ Top             │
╞══════╤══════════╡
│ Left │ Right    │
└──────┴──────────┘

Я хотел бы иметь возможность скрыть один элемент, а другой заполнить его пробел. 

┌─────────────────┐
│ Top             │
╞═════════════════╡
│ Right           │
└─────────────────┘

Столбцы не расположены равномерно. Я использовал следующие CSS для элементов main и div#top: 

main {
    display: grid;
    grid-template-rows: 3em 1fr;
    grid-template-columns: 120px 1fr;
    border: medium solid #333;
}
div#top {
    grid-column: 1/3;
}

Проблема в том, что когда я скрываю первый div, используя display: none, второй занимает только оригинальное пространство первого.

Как мне убедить второе деление занять весь ряд?

Фрагмент ниже иллюстрирует точку.

Примечание: Вопрос на Сделать так, чтобы div заполнял всю строку CSS сетки, когда другая часть недоступна , просит что-то подобное, но решение не работает в моем случае. Это потому, что мой левый div имеет заданную ширину. 

var left = document.querySelector('div#left');
var right = document.querySelector('div#right');

right.addEventListener('click', function(e) {
  left.style.display = left.style.display == 'none' ? 'block' : 'none';
});
main {
  display: grid;
  grid-template-rows: 3em 1fr;
  grid-template-columns: 120px 1fr;
  border: medium solid #333;
}

div#top, div#left, div#right {
  border: medium solid #999;
  background-color: #f8f8f8;
  margin: 4px;
  font-family: sans-serif;
  padding: .5em;
}
div#top {
  grid-column: 1/3;
}
div#left {

}
div#right {
  
}
<main>
  <div id="top">Top</div>
  <div id="left">Left</div>
  <div id="right">Right: Click to Toggle Left</div>
</main>

Ответы [ 2 ]

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

Использовать дисплей: flex 

var right = document.querySelector('div#right');

right.addEventListener('click', function(e) {
   var left = document.querySelector('div#left');
   var shown= !(left.style.display == 'none') ;
   if ( !shown ) {
     left.style.display = 'block';
   } else {
     left.style.display = 'none';
   }
});
main {
  grid-template-rows: 3em 1fr;
  grid-template-columns: 120px 1fr;
  border: medium solid #666;
}

div#top, div#left, div#right {
  border: medium solid transparent;
  box-shadow: inset 0px 0px 0px 4px #AAA;
  background-color: #f8f8f8;
  font-family: sans-serif;
  padding: 1em;
}
div#top {
  grid-column: 1/3;
}
div#left {
  width: 33%;
  float: left;
}
div#right {
  display: flex;
}
<main>
  <div id="top">Top</div>
  <div id="left">Left</div>
  <div id="right">Right: Click to Toggle Left</div>
</main>
0 голосов
/ 10 февраля 2020

JS только для демо? При щелчке, когда для левого элемента установлено значение display: none, почему бы не установить для правого элемента значение grid-column: 1 / 3?

Если это не вариант, попробуйте flexbox, который может легко и просто справиться с ситуацией. . 

var left = document.querySelector('div#left');
var right = document.querySelector('div#right');

right.addEventListener('click', function(e) {
  left.style.display = left.style.display == 'none' ? 'block' : 'none';
});
main {
  display: flex;
  flex-wrap: wrap;
  border: medium solid #333;
}

div#top {
  flex: 1 0 90%; /* to allow space for margins; see note below */
}

div#left {
  flex: 0 0 120px; /* flex-grow, flex-shrink, flex-basis */
}

div#right {
  flex: 1; /* fg:1, fs:1, fb:0 */
}

main > div {
  border: medium solid #999;
  background-color: #f8f8f8;
  margin: 4px;
  font-family: sans-serif;
  padding: .5em;
}
<main>
  <div id="top">Top</div>
  <div id="left">Left</div>
  <div id="right">Right: Click to Toggle Left</div>
</main>

Дополнительная информация

Вот объяснение flex: 1 0 90%:

Вот объяснение проблемы, с которой вы сталкиваетесь в Grid:

...