Блог

Главная - Вопросы по программированию - Переменный макет сетки CSS

Переменный макет сетки CSS

#css #css-grid

#css #css-grid

Вопрос:

У меня есть макет, подобный этому:

введите описание изображения здесь

иногда мой макет может выглядеть следующим образом (без menu ):

введите описание изображения здесь

иногда вот так (без sidebar ):

введите описание изображения здесь

и, наконец, мой макет может превратиться в это (без menu и sidebar ):

введите описание изображения здесь

Я использую макет сетки CSS, и когда блок отсутствует, появляются пустые области. Как удалить эти пустые области?

https://codepen.io/perevezencev/pen/ywRrEz

Ответ №1:

Вы можете рассмотреть grid-column / grid-row возможность размещения ваших элементов вместо областей, подобных приведенным ниже:

 div, aside, main {
  border: 1px solid black;
}

.layout {
  display: grid;
  grid-template-rows: 75px auto 1fr;
  grid-template-columns: 260px 1fr;

}

.header {
  display: contents;
}

.menu {
  grid-column:1/-1;
  grid-row:2;
  min-height:75px;
}

.sidebar {
  grid-column:1 / -2;
}

.main{
  grid-column:1 / -1;
}
/*when there is a sidebar "main" will take only the last column*/
.sidebar ~ .main{
  grid-column:2 / -1;
}  
 <div class="layout">
  <header class="header">
    <div class="brand">brand</div>
    <div class="appbar">appbar</div>
  </header>
  <aside class="sidebar">sidebar</aside>
  <div class="menu">menu</div>
  <main class="main">main</main>
</div>

<hr />

<div class="layout">
  <header class="header">
    <div class="brand">brand</div>
    <div class="appbar">appbar</div>
  </header>
  <aside class="sidebar">sidebar</aside>
  <main class="main">main</main>
</div>

<hr />

<div class="layout">
  <header class="header">
    <div class="brand">brand</div>
    <div class="appbar">appbar</div>
  </header>
  <div class="menu">menu</div>
  <main class="main">main</main>
</div>

<hr />

<div class="layout">
  <header class="header">
    <div class="brand">brand</div>
    <div class="appbar">appbar</div>
  </header>
  <main class="main">main</main>
</div>