Responsive CSS Grid layout with position: fixed

Question

I'm building a responsive template with CSS Grid Layout (still learning) and thanks to a few of you on here, I've got most of it working.

mobile (max-width: 767px)
- everything should appear on its own row
tablet (min-width: 768px)
- nav is on the first row
- aside and main on the second
desktop (min-width: 992px)
- same as tablet but with 10% of spacing horizontally
xl desktop (min-width: 1920px)
- same as desktop but has a max-width of 1920px

The thing is I'm using a header tag to color the spacing to the left and right of the nav. Whether I use a header or a div, it doesn't seem right having an empty container just for coloring the empty space. Is there a way of doing this in a way that lets me apply position: fixed on the entire top section?

* {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  font-family: sans-serif;
}

a {
  text-decoration: none;
  color: white;
}

header,
nav {
  background: blue;
  color: #fff;
}

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

nav span {
  margin-right: auto;
}

header {
  display: none;
}

aside {
  background: lightgreen;
}

main {
  background: pink;
}


/* mobile  */

@media (max-width: 767px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  nav,
  aside,
  main {
    grid-column: 1 / 1;
    padding: 0 15px;
  }
}


/* tablets */

@media (min-width: 768px) {
  body {
    grid-template-columns: 275px 1fr;
    grid-template-rows: 1fr 1fr;
  }
  nav {
    grid-column: 1 / 4;
    grid-row: 1;
    height: 50px;
    grid-row: 1;
  }
  aside {
    grid-column: 1;
  }
  main {
    grid-column: 2;
  }
  nav,
  aside,
  main {
    padding: 0 15px;
  }
}


/* desktops */

@media (min-width: 992px) {
  body {
    grid-template-columns: 10% 275px 1fr 10%;
    grid-template-rows: 1fr 1fr;
  }
  header {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
  }
  nav {
    grid-column: 2 / 4;
    grid-row: 1;
  }
  aside {
    grid-column: 2 / 3;
  }
  main {
    grid-column: 3 / 4;
  }
}


/* xl desktops */

@media (min-width: 1920px) {
  body {
    grid-template-columns: 1fr minmax(auto, 300px) minmax(auto, 1620px) 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

<header></header>
<nav>
  <span>Logo</span>
  <a href="#">login</a>
</nav>
<aside>aside</aside>
<main>main</main>

https://jsfiddle.net/90kotz8d/1/

You're asking two questions: one about spacing and another about media queries. It's normally better to focus on one question at a time. — Michael Benjamin, Mar 01 '18 at 17:07
With regard to media queries, here you go: [Common breakpoints for media queries on a responsive site](https://stackoverflow.com/q/8564752/3597276) — Michael Benjamin, Mar 01 '18 at 17:08
I've edited the question and will create a another one for media queris. Thanks — totalnoob, Mar 01 '18 at 17:10
The link I posted may answer your question about media queries. — Michael Benjamin, Mar 01 '18 at 17:13
What's the tag you're using to creating spacing? The `header` on wider screens? — Michael Benjamin, Mar 01 '18 at 17:13
Could you post a comment saying why my previous answer is not suitable for you ? It will be easier to help you this way — vals, Jun 14 '18 at 06:15
Are you trying to create spacing from the top of the page? Where is it that you are conflicted with using a tag just for spacing? — Jake, Jun 14 '18 at 18:49

score 6 · Answer 1 · answered Mar 01 '18 at 19:07

If I understand your intent, you are not really using header for spacing, you are really using it to get the blue background to cover all the space.

Since you seem also wanting the logo and login to vertically align with the boundaries, I don't think that there is any posible solution to do this with the nav.

So, the only solution that I could find involves using a pseudo element. At least this is more semantic. I got rid of the media queries, since now they don't play a role here:

* {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
    grid-template-columns: 10% 275px 1fr 10%;
    grid-template-rows: 1fr 1fr;
}

.container::after {
    content: "";
    background-color: blue;
    grid-column: 1 / 5;
    grid-row: 1;
    z-index: -1;
}

a {
  text-decoration: none;
  color: white;
}


nav {
  background: blue;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

nav span {
  margin-right: auto;
}

header {
  display: none;
}

aside {
  background: lightgreen;
}

main {
  background: pink;
}
nav {
    grid-column: 2 / 4;
    grid-row: 1;
  }
  aside {
    grid-column: 2 / 3;
  }
  main {
    grid-column: 3 / 4;
  }

<div class="container">
<nav>
  <span>Logo</span>
  <a href="#">login</a>
</nav>
<aside>aside</aside>
<main>main</main>
</div>

score 4 · Answer 2 · edited Oct 22 '18 at 00:46

4

From what I can see, you might need to add a rule saying it is display: block; before you can add the position: fixed rule, because I am pretty sure <header>s are inline elements.

You could also try and add media queries, linking to different stylesheets, that display different tables, using the display: tableRow;, tableCell and table values.

Hope this works

edited Oct 22 '18 at 00:46

Community

1
1

answered Jun 16 '18 at 08:07

Jack Bashford

43,180
11
50
79

1

`
` is a block level element.
– sol Jun 20 '18 at 07:34

UkFLSUI · Answer 3 · 2018-06-19T09:51:18.850

I guess, this is something, what you want. I have used grid-column: 1 / 8; in the @media (min-width: 992px) and added manual padding on both sides. I hope, without this solution, till now no more options you are having without using extra <div>, <header> or any other containers.

* {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  font-family: sans-serif;
}

a {
  text-decoration: none;
  color: white;
}

header,
nav {
  background: blue;
  color: #fff;
}

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

nav span {
  margin-right: auto;
}

header {
  display: none;
}

aside {
  background: lightgreen;
}

main {
  background: pink;
}

/* mobile  */


@media (max-width: 767px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  
  nav,
  aside,
  main {
    grid-column: 1 / 1;
    padding: 0 15px;
  }
}


/* tablets */


@media (min-width: 768px) {
  body {
    grid-template-columns: 275px 1fr;
    grid-template-rows: 1fr 1fr;
  }
  
  nav {
    grid-column: 1 / 4;
    grid-row: 1;
    height: 50px;
    grid-row: 1;
  }
  
  aside {
    grid-column: 1;
  }
  
  main {
    grid-column: 2;
  }
  
  nav,
  aside,
  main {
    padding: 0 15px;
  }
}


/* desktops */


@media (min-width: 992px) {
  body {
    grid-template-columns: 10% 275px 1fr 10%;
    grid-template-rows: 1fr 1fr;
  }
  
  nav {
    grid-column: 1 / 8;
    grid-row: 1;
    padding-right: 11.3vw;
    padding-left: 11.3vw;
  }
  
  aside {
    grid-column: 2 / 3;
  }
  
  main {
    grid-column: 3 / 4;
  }
}


/* xl desktops */


@media (min-width: 1920px) {
  body {
    grid-template-columns: 1fr minmax(auto, 300px) minmax(auto, 1620px) 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

<nav>
  <span>Logo</span>
  <a href="#">login</a>
</nav>
<aside>aside</aside>
<main>main</main>

Responsive CSS Grid layout with position: fixed

3 Answers3

Linked