CSS 网格布局，简单的响应式设计

Question

I'm trying to understand the CSS grid. My layout consist of two menus (red), one on each side of a main content box in the middle (blue).

When the screen becomes smaller and there is not enough space for 3 columns, I want the second (right) side menu to appear right under the first (left) one.

Consider the height of main content and the side menus as random values, as the height will change depending on how much content/menu items is in them. Solution should work regardless of height.

My current layout almost works, except that the second menu appears under the end of the main content, and not right after the first menu. How can I solve this?

 .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>

Like the title states "CSS grid layout" i don't want to use js.

Answer 1

In media screen you can set up 2 rows to do the job Also i suggest to use "fr" instead of pixels in grid layout.

You can find a nice guide here https://css-tricks.com/snippets/css/complete-guide-grid/

 .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 2

You haven't defined any rows in the grid:

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

Therefore, all rows are implicit , meaning they are created automatically to accommodate items.

The sizing function for implicit rows isgrid-auto-rows and its default value is auto . This means that rows take the size of the content.

You've set the size of your grid items:

.side-menu {
  height: 50px;
}

.main-content {
  height: 300px;
}

So the .main-content , being the taller of the grid items, sets the height of the row:

As you can see, you have a grid container with one row.

Then your media query kicks in for smaller screens:

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

The new grid-template-columns rule alters the grid from three to two columns.

This forces the grid to create a second implicit row to accommodate the second .side-menu , whose column has been removed.

In short, a second row exists under the first row. The first row is 300px tall. This results in a wide vertical gap between the first and second menus.

---

One Possible Solution

Use multiple smaller rows and make your items span across them. The

The code below renders like this:

 .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>

codepen demo