Search code examples
htmlcsscss-grid

CSS Grid Layout. Row that contains a logo may be set or maybe not

I have this grid layout.

The nav and footer areas takes up the whole space between column 1 and column 4.

The header, main and aside takes up only the space between column 2 and column 3.

enter image description here

The header will just hold a logo. However I design for a CMS and that logo might be set, might be not, depending on the user. By default there is no logo set but what should I do with that empty header area in grid when logo is not set?

Please check the full page view:

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, auto) 1fr;
  min-height: 100vh;
}

.nav {
  background: #0e9daf;
}

.main {
  background: #9e9e9e;
}

.header {
  background: #6F9C1B;
}

.sidebar {
  background: #dd9f32;
}

.footer {
  align-self: end;
  background: #9b51e0;
}

@media (min-width: 52em) {
  .grid-container {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 50em)
      minmax(0, 20em)
      minmax(0, 1fr);
    grid-template-rows: repeat(3, auto) 1fr;
  }

  .grid-container > * {
    grid-column: 1/-1;
  }

  .main {
    grid-column: 2;
  }

  .sidebar {
    grid-column: 3;
  }

  .header {
    grid-column: 2/4;
  }
}
<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="test-layout.css">
  <title>CSS Grid Layout</title>
</head>
<body>
  <div class="grid-container">
    <nav class="nav">
      Nav
    </nav>

    <header class="header">
      Logo
    </header>

    <main class="main">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </main>

    <aside class="sidebar">
      Sidebar
    </aside>

    <footer class="footer">
      Footer
    </footer>
  </div>
</body>
</html>

This CSS is responsible for the rows on larger screens:

grid-template-rows: repeat(3, auto) 1fr;

So there are 4 rows in total. However, what will happen if the user don't upload a logo? which means there will be nothing (no content) in the second row (the header row). Should I just let the header row there regardless if the logo is the set or not?

grid-template-rows: repeat(3, auto) 1fr;

Any suggestion would be appreciate. Thank you!

Solution

  • Since the height of that row is auto simply set the position of each element explicitely and it would be good. That row will be empty (height = 0) when the logo is not there.

    Add/remove header element to compare

    :root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, auto) 1fr;
  min-height: 100vh;
}

.nav {
  background: #0e9daf;
}

.main {
  background: #9e9e9e;
  grid-row:3; /* added */
}

.header {
  background: #6F9C1B;
}

.sidebar {
  background: #dd9f32;
  grid-row: 4; /* added */
}

.footer {
  align-self: end;
  background: #9b51e0;
  grid-row: 5; /* added */
}

@media (min-width: 52em) {
  .grid-container {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 50em)
      minmax(0, 20em)
      minmax(0, 1fr);
    grid-template-rows: repeat(2, auto) 1fr auto;
  }

  .grid-container > * {
    grid-column: 1/-1;
  }

  .main {
    grid-column: 2;
  }

  .sidebar {
    grid-column: 3;
    grid-row:3; /* added */
  }

  .header {
    grid-column: 2/4;
  }
}
    <div class="grid-container">
    <nav class="nav">
      Nav
    </nav>

    <!--<header class="header">
      Logo
    </header>-->

    <main class="main">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </main>

    <aside class="sidebar">
      Sidebar
    </aside>

    <footer class="footer">
      Footer
    </footer>
  </div>