0

I have layout like this:

enter image description here

sometimes my layout might look like this (without menu):

enter image description here

sometimes like this (without sidebar):

enter image description here

and finally my layout might transform into this (without menu and sidebar):

enter image description here

I use CSS Grid layout, and when a block is missing, empty areas appear. How to remove this empty areas?

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

1 Answer 1

2

You can consider grid-column/grid-row to place your elements instead of areas like below:

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>

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.