CSS Grid layout with gutters

user_4239355 0
Viewed 1145

I need a layout like so:

enter image description here

Here is my try:

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

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

.grid-container {
  display: grid;
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [main-start] minmax(0, 55.625em) [main-end]
    minmax(0, 1fr) [full-end];
}

.grid-container > * {
  grid-column: full-start / full-end;
}

.header {
  background: #0e9daf;
}

.main {
  background: #9E9E9E;
  grid-column: main-start;
}

.sidebar {
  background: #dd9f32;
}

.footer {
  background: #9b51e0;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="gridlayout.css">
  <title>Document</title>
</head>
<body>
  <div class="grid-container">
    <header class="header">
      Header
    </header>

    <main class="main">
      Main
    </main>

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

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

If the screen is wider, let's say a 1080p screen, the main content has gutters on the left and right side, but the header and footer extends the full page.

Think about something like this, but I'm achieving it with grid:

  .main {
     max-width: 800px;
     margin: 0 auto;
  }

On larger displays, I would like to split the main area in two portions, I need a content area (a list of all blog posts) and a sidebar on the right with widgets such as "recent posts", "search bar", etc). I need some gap (not much) between the content and sidebar.

On small screens, I would like the header first, the blog posts below the header, the widgets below the blog posts, and the footer last.

I'm not even sure if I approached this the right way. I would love to hear your opinions. Thank you.

css html
3 Answers

You can use template-areas (https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) to achieve this quite easy. If you want the layout to change with different resolutions, just add @media queries and define a new grid-template-area.

(I changed minmax(0, 55.625em) to minmax(0, 400px) for visual effect below)

.grid-container {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns:  1fr minmax(0, 300px) minmax(0, 100px) 1fr;
  grid-column-gap:10px;
  grid-template-areas: 
     "header header header header"
     ". main sidebar ."
     "footer footer footer footer"
  ;
}

.header {
  grid-area: header;
  background: #0e9daf;
}

.main {
  grid-area: main;
  background: #9E9E9E;
  grid-column: main-start;
}

.sidebar {
  grid-area: sidebar;
  background: #dd9f32;
}

.footer {
  grid-area: footer;
  background: #9b51e0;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="grid-container">
    <header class="header">
      Header
    </header>

    <main class="main">
      Main
    </main>

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

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

user_10528260

using grid-template-areas, you can easily achieve the desired layout

html,
body {
  height: 100%;
  margin: 0;
}

.grid-container {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 15%;
  grid-template-rows: 1fr 10fr 1fr;
  justify-content: center;
  grid-column-gap: 2%;
  grid-template-areas: "h h h h" "m m m s" "f f f f";
}

.header {
  background: #0e9daf;
  grid-area: h;
}

.main {
  background: #9E9E9E;
  grid-area: m;
}

.sidebar {
  background: #dd9f32;
  grid-area: s;
}

.footer {
  background: #9b51e0;
  grid-area: f;
}

@media (max-width: 480px) {
  .grid-container {
    grid-template-areas: "h h h h" "m m m m" "s s s s" "f f f f";
  }
}

@media (min-width: 1080px) {
  .grid-container {
    grid-template-columns: 10% 62% 12% 10%;
    grid-template-areas: "h h h h" ". m s ." "f f f f";
  }
}
<div class="grid-container">
  <header class="header">
    Header
  </header>

  <main class="main">
    Main
  </main>

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

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

user_60943480

You can split the middle column and have 4 columns instead of 3 and you consider media query to switch back to 3 columns:

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

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

.grid-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40.625em) minmax(0, 15em) minmax(0, 1fr);
}

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

.header {
  background: #0e9daf;
}

.main {
  background: #9E9E9E;
  grid-column: 2;
  margin-right: 5px;
}

.sidebar {
  background: #dd9f32;
  grid-column: 3;
  margin-left: 5px;
}

.footer {
  background: #9b51e0;
}

@media all and (max-width:800px) {
  .grid-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 55.625em) minmax(0, 1fr);
  }
  .main,
  .sidebar {
    grid-column: 2;
    margin: 0;
  }
}
<div class="grid-container">
  <header class="header">
    Header
  </header>

  <main class="main">
    Main
  </main>

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

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

user_86203330
Related