Question 246237 in CSS Question posted in
Some basic documentation can be found here.

CSS Set grid from multiple columns to only one column

I recently join a web app project. I was tasked with making some parts of the web responsive to mobile view. The Homepage consists of a grid with three columns:

.main {
font-family: "Gentona 300";
height: 100vh;
width: 100%; /* Set height to 100% of viewport height */
display: grid;


overflow: hidden;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 1fr 0.2fr 2fr 2fr;
grid-template-areas:
    "sidebar header header"
    "sidebar navbar navbar"
    "sidebar main main"
    "sidebar main main";
}

I used media queries to change the layout into a single column like this:

.main {
font-family: "Gentona 300";
height: 100vh;
width: 100%; /* Set height to 100% of viewport height */
display: grid;


overflow: hidden;
grid-template-columns: 1fr;
grid-template-rows: 1fr 0.2fr 2fr 2fr;
grid-template-areas:
"header"
"navbar"
"main"
"main";
}

@media screen and (min-width: 768px) {
    .main {
        grid-template-columns: 1fr 3fr 1fr;
        grid-template-areas:
        "sidebar header header"
        "sidebar navbar navbar"
        "sidebar main main"
        "sidebar main main";
    }
}

Is this the correct way to do it?

Tags:

2

Answers


  1. 0

    Your approach is correct.
    But you can shorten the code by combining grid-template-areas, grid-template-columns and grid-template-rows to grid-template property:

    body {
  margin: 0;
}

.main {
  font-family: "Gentona 300";
  height: 100dvh;
  display: grid;
  overflow: hidden;
  grid-template:
    "header" 1fr
    "navbar" .2fr
    "main" 4fr
  ;
}

@media (width >= 768px) {
  .main {
    grid-template:
       "sidebar header header" 1fr
       "sidebar navbar navbar" .2fr
       "sidebar main main" 4fr
       / 1fr 4fr
    ;
  }
}

header {
  background: blue;
  grid-area: header;
}

nav {
  background: yellow;
  grid-area: navbar;
}

aside {
  background: orange;
  grid-area: sidebar;
  display: none;
}

@media (width >= 768px){
  aside {
    display: block;
  }
}

main {
  background: gray;
  grid-area: main;
}
    <div class="main">
  <header></header>
  <nav></nav>
  <aside></aside>
  <main></main>
</div>
    Login or Signup to reply.
  2. 0

    Your approach would work as it is valid but "poorly" coded. Yru let elements span 2 rows or 2 columns while in the end it should be just 1.

    You say you have a 3-column grid such as:

    aside header header
aside nav    nav
aside main   main
aside main   main

    As you see, you actually have only a 2-column grid as the aside is the left column and header, nav, and main all span 2 columns and as such are actually only 1 column:

    aside header
aside nav
aside main
aside main

    The same applies for rows. You let the main span 2 rows while the row height is by default auto and as such only as height as the content. So you can shorten it as welll to:

    aside header
aside nav
aside main

    Your CSS should be:

    .main {
  font-family: "Gentona 300";
  height: 100vh;
  width: 100%; /* Set height to 100% of viewport height */
  display: grid;
  overflow: hidden;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 0.2fr 4fr;
  grid-template-areas:
    "header"
    "navbar"
    "main";
}

@media only screen and (min-width: 768px) {
  .main {
    grid-template-columns: 1fr 4fr;
    grid-template-areas:
      "sidebar header"
      "sidebar navbar"
      "sidebar main";
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search