Creating a responsive web design with a user-friendly CSS grid layout

Question

Creating a responsive web design with a user-friendly CSS grid layout

Currently, I am delving into the realm of CSS grid to better comprehend its functionality. In my layout design, there are two menus (colored in red) positioned on either side of a central main content box (colored in blue).

As the screen size reduces and accommodation for three columns becomes unfeasible, my objective is to have the second menu (on the right side) shift directly below the first one (on the left side).

https://i.sstatic.net/5hYKH.png

The height variations among the main content and side menus are arbitrary, as their heights depend on the quantity of content or menu items they contain. The solution should remain effective regardless of these height discrepancies.

The current layout is almost flawless, with the minor issue being that the second menu appears below the conclusion of the main content rather than directly following the first menu. How can this be rectified?

.main-container {
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 400px) {
  .main-container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 40px 80px 40px;
    justify-content: center;
  }
}

@media only screen and (max-width: 400px) {
  .main-container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 40px 80px;
    justify-content: center;
  }
}

.side-menu {
  width: 100%;
  height: 50px;
  background-color: red;
}

.main-content {
  width: 100%;
  height: 300px;
  background-color: blue;
}

<div class="main-container">
  <div class="side-menu"></div>
  <div class="main-content"></div>
  <div class="side-menu"></div>
</div>

In adherence to the title's instruction "CSS grid layout," I am aiming to achieve this without resorting to JavaScript.

html css grid grid-layout css-grid

Answer 1

Answer №1

No rows have been specified in the grid:

.main-container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 40px 80px 40px;
  justify-content: center;
}

Because of this, all rows are automatically generated to accommodate items, known as implicit rows.

The sizing function for implicit rows is defined using grid-auto-rows with a default value of auto, making the rows adjust based on content size.

The height has been set for grid items:

.side-menu {
  height: 50px;
}

.main-content {
  height: 300px;
}

Thus, the height of the row is determined by the tallest item, which is .main-content:

https://i.sstatic.net/u8iiF.png

The grid container consists of one row according to the setup.

Upon reaching smaller screen sizes, the media query comes into play:

@media ( max-width: 400px ) {
  .main-container {
    grid-template-columns: 40px 80px;
  }
}

This modification changes the grid from three columns to two, resulting in the creation of a new implicit row to fit the second .side-menu due to column adjustments:

https://i.sstatic.net/T1PSA.png

In summary, a second row is added beneath the first, causing a significant vertical gap between the menus.

Potential Resolution

To address this issue, consider using multiple smaller rows and expanding your items across them. The model below demonstrates this concept:

https://i.sstatic.net/NR6pa.png

.main-container {
    display: grid;
    grid-template-columns: 40px 80px 40px;
    grid-auto-rows: 10px;  /* new */
    grid-column-gap: 20px; /* adjusted */
}

.side-menu:first-child {
  /* height: 50px; */
  grid-column: 1;
  grid-row: span 5;
}

.side-menu:last-child {
  /* height: 50px; */
  grid-column: 3;
  grid-row: span 5;
}

.main-content {
  /* height: 300px; */
  grid-column: 2;
  grid-row: span 30;
}

@media ( max-width: 400px ) {
  .main-container {
    grid-template-columns: 40px 80px;
  }
  .side-menu:last-child {
    grid-column: 1;
    grid-row: 7 / span 5;
  } 
}

.main-content { background-color: blue; }
.side-menu    { background-color: red;  }

<div class="main-container">
  <div class="side-menu"></div>
  <div class="main-content"></div>
  <div class="side-menu"></div>
</div>

Explore CodePen Demo

Answer 2

No rows have been specified in the grid:

.main-container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 40px 80px 40px;
  justify-content: center;
}

Because of this, all rows are automatically generated to accommodate items, known as implicit rows.

The sizing function for implicit rows is defined using grid-auto-rows with a default value of auto, making the rows adjust based on content size.

The height has been set for grid items:

.side-menu {
  height: 50px;
}

.main-content {
  height: 300px;
}

Thus, the height of the row is determined by the tallest item, which is .main-content:

https://i.sstatic.net/u8iiF.png

The grid container consists of one row according to the setup.

Upon reaching smaller screen sizes, the media query comes into play:

@media ( max-width: 400px ) {
  .main-container {
    grid-template-columns: 40px 80px;
  }
}

This modification changes the grid from three columns to two, resulting in the creation of a new implicit row to fit the second .side-menu due to column adjustments:

https://i.sstatic.net/T1PSA.png

In summary, a second row is added beneath the first, causing a significant vertical gap between the menus.

Potential Resolution

To address this issue, consider using multiple smaller rows and expanding your items across them. The model below demonstrates this concept:

https://i.sstatic.net/NR6pa.png

.main-container {
    display: grid;
    grid-template-columns: 40px 80px 40px;
    grid-auto-rows: 10px;  /* new */
    grid-column-gap: 20px; /* adjusted */
}

.side-menu:first-child {
  /* height: 50px; */
  grid-column: 1;
  grid-row: span 5;
}

.side-menu:last-child {
  /* height: 50px; */
  grid-column: 3;
  grid-row: span 5;
}

.main-content {
  /* height: 300px; */
  grid-column: 2;
  grid-row: span 30;
}

@media ( max-width: 400px ) {
  .main-container {
    grid-template-columns: 40px 80px;
  }
  .side-menu:last-child {
    grid-column: 1;
    grid-row: 7 / span 5;
  } 
}

.main-content { background-color: blue; }
.side-menu    { background-color: red;  }

<div class="main-container">
  <div class="side-menu"></div>
  <div class="main-content"></div>
  <div class="side-menu"></div>
</div>

Explore CodePen Demo

Answer 3

Answer №2

To effectively utilize media screen, consider setting up 2 rows for the task at hand. Additionally, I recommend using "fr" units instead of pixels in grid layout.

For more detailed instructions, check out this helpful guide here.

.main-container {
      width: 100%;
      height: 100%;
    }

    @media only screen and (min-width: 400px) {
      .main-container {
        display: grid;
        grid-gap: 20px;
        grid-template-columns: 40px 80px 40px;
        grid-template-rows: 40px;
        justify-content: center;
        grid-auto-flow: rows;
      }
      .side-menu:nth-child(odd) {
      width: 100%;
      height: 50px;
      background-color: red;
        grid-column: 1;
      }

      .side-menu:nth-child(even) {
      width: 100%;
      height: 50px;
      background-color: red;
        grid-column: 3;
      }
    }

    @media only screen and (max-width: 400px) {
      .main-container {
        display: grid;
        grid-gap: 20px;
        grid-template-columns: 40px 80px;
        grid-auto-rows: 40px;
        justify-content: center;
      }

      .side-menu {
      width: 100%;
      height: 50px;
      background-color: red;
        grid-column: 1;
      }
    }


    .main-content {
      width: 100%;
      height: 300px;
      background-color: blue;
    }

<div class="main-container">
  <div class="side-menu"></div>
  <div class="main-content"></div>
  <div class="side-menu"></div>
</div>

Answer 4

To effectively utilize media screen, consider setting up 2 rows for the task at hand. Additionally, I recommend using "fr" units instead of pixels in grid layout.

For more detailed instructions, check out this helpful guide here.

.main-container {
      width: 100%;
      height: 100%;
    }

    @media only screen and (min-width: 400px) {
      .main-container {
        display: grid;
        grid-gap: 20px;
        grid-template-columns: 40px 80px 40px;
        grid-template-rows: 40px;
        justify-content: center;
        grid-auto-flow: rows;
      }
      .side-menu:nth-child(odd) {
      width: 100%;
      height: 50px;
      background-color: red;
        grid-column: 1;
      }

      .side-menu:nth-child(even) {
      width: 100%;
      height: 50px;
      background-color: red;
        grid-column: 3;
      }
    }

    @media only screen and (max-width: 400px) {
      .main-container {
        display: grid;
        grid-gap: 20px;
        grid-template-columns: 40px 80px;
        grid-auto-rows: 40px;
        justify-content: center;
      }

      .side-menu {
      width: 100%;
      height: 50px;
      background-color: red;
        grid-column: 1;
      }
    }


    .main-content {
      width: 100%;
      height: 300px;
      background-color: blue;
    }

<div class="main-container">
  <div class="side-menu"></div>
  <div class="main-content"></div>
  <div class="side-menu"></div>
</div>

Creating a responsive web design with a user-friendly CSS grid layout

Answer №1

Potential Resolution

Explore CodePen Demo

Answer №2

Similar questions

Custom HTML select element not triggering the onchange event

Steps for incorporating a storyline into a CSS Chart

The nested div does not have scrolling functionality

Canvas in the off state has been removed

The submit button appears as grey on IOS when using the input[type="submit"]

Absolute positioned content causing unexpected spacing on top of relative positioned content

Adjusting data points on a radar chart.js through user interaction

Conceal elements of a rectangular shape using CSS

How to trigger a hover effect on a div and its child simultaneously using HTML and jQuery

Sliding Up Transition Effect for Footer with JQuery or CSS3

Optimizing Static File Caching in Yii

Troubleshooting: Issues with jQuery's Class selector

Applying CSS to color the letters of a text, without needing to alter the HTML code

When I apply position: absolute; to my navigation bar, the anchor tags and links do not seem to function properly, especially with a video playing in the background

What is the most effective way to extract information from a .txt file and showcase a random line of it using HTML?

The submenu background and text CSS are out of alignment

Sending AJAX data by clicking a link in Laravel 5

What is the best way to create a border that surrounds a collection of pictures?

Increased pixels being incorporated into my line spacing

Is there a way to prevent one accordion pattern from automatically closing when another one is opened?