CSS alignment - 当另一张卡片添加到页面时卡片高度缩小

Question

我正在设计一个网站，但无法正确对齐其中一张卡片。

这是包含完整 HTML 和 CSS 的 Codesandbox 链接：链接

预期的布局应该是这样的：

我最后一次尝试以这种布局结束：我面临的问题是：

1. 当我添加另一个Content Area时，我无法让Content Area 2与Content Area 3 、 Content Area 4保持相同的高度。

2. Content Area 2只应增加高度，而不能变小以适应另一个Content Area

3. Content Area 2的宽度也不正确。

这是我添加另一个内容区域时的方式。

<div class="grid-container">
  <header class="header">
    <div class="header__search">Main header</div>
  </header>
  <main class="main">
   <h3>Tabs</h3>
    <div class="overviewcard">
        <div class="overviewcard__icon">Filter(collapsed)</di>
      </div>
      <div class="main-header">
      <div class="header__search">Content Area 1</div>
    </div>
    <div >
    </div>
    <div class="main-cards">
      <div class="card">Content Area 2</div>
      <div class="card">Content Area 3</div>
      <div class="card">Content Area 4</div>
    </div>
  </main>
</div>

任何帮助表示赞赏。 flexbox 或 CSS 网格解决方案很好

Answer 1

不确定您希望它在移动设备与桌面设备上的外观，但假设您提供的目标布局是桌面设备，这里有一个 CSS 网格解决方案：

 body { margin: auto; padding: auto; color: blue; font-family: "Open Sans", Helvetica, sans-serif; box-sizing: border-box; } /* Assign grid instructions to our parent grid container, mobile-first (hide the sidenav) */.grid-container { display: grid; grid-template-columns: 1fr; grid-template-rows: 50px 1fr 50px; grid-template-areas: "header" "main" "footer"; height: 100vh; }.menu-icon { position: fixed; /* Needs to stay visible for all mobile scrolling */ display: flex; top: 5px; left: 10px; align-items: center; justify-content: center; background-color: #dadae3; border-radius: 50%; z-index: 1; cursor: pointer; padding: 12px; } /* Give every child element its grid name */.header { grid-area: header; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; background-color: #648ca6; } /* Make room for the menu icon on mobile */.header__search { margin-left: 42px; }.main { grid-area: main; background-color: #eaeaea; }.main-header { display: flex; justify-content: space-between; margin: 20px; padding: 20px; height: 150px; background-color: #e3e4e6; color: slategray; }.main-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); grid-auto-rows: 94px; grid-gap: 20px; margin: 20px; }.overviewcard { display: flex; align-items: center; justify-content: space-between; padding: 20px; background-color: #d3d3; }.main-cards { display: grid; grid-template-columns: 1fr; grid-gap: 20px; margin: 20px; }.card { display: flex; flex-direction: column; align-items: center; width: 100%; background-color: #82bef6; -webkit-column-break-inside: avoid; padding: 24px; box-sizing: border-box; } /* Force varying heights to simulate dynamic content */.card:first-child { grid-row: 1 / -1; } /* Medium screens breakpoint (1050px) */ @media only screen and (min-width: 65.625em) { /* Break out main cards into two columns */.main-cards { grid-template-columns: minmax(min-content, 2fr) minmax(min-content, 3fr); grid-template-rows: minmax(min-content, 1fr) minmax(min-content, 3fr) minmax(min-content, 2fr); } }

 <div class="grid-container"> <header class="header"> <div class="header__search">Main header</div> </header> <main class="main"> <h3>Tabs</h3> <div class="overviewcard"> <div class="overviewcard__icon">Filter(collapsed)</div> </div> <div class="main-header"> <div class="header__search">Content Area 1</div> </div> <div></div> <div class="main-cards"> <div class="card">Content Area 2</div> <div class="card">Content Area 3</div> <div class="card">Content Area 4</div> <div class="card">Content Area 5</div> </div> </main> </div>

*编辑：为我更改的部分添加一些重磅评论以澄清我所做的：

    /* Let's not use css columns here. That's basically a very dumbed down version of CSS Grid, wherein all content just stays in the normal flow and splits into columns. Not much flexibility there. Let's use Grid instead to define one column for our mobile layout. The media query below will add columns for larger screens. */
.main-cards {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  margin: 20px;
}

/* Instead of applying fixed heights to our children, let's let the parent grid take care of the layout. Then all we need to do is assign the first child to start at the beginning of the first row, and go until the end. i.e. full height of the parent. The rest of the children will now fall into the normal flow */
.card:first-child {
  grid-row: 1 / -1;
}

/* Medium screens breakpoint (1050px) */
@media only screen and (min-width: 65.625em) {
  /* Break out main cards into two columns, each going no smaller than its content, but as large as it needs to take up the remaining space. Second column grows at a ratio of 3:2 in comparison to the first */
  .main-cards {
  grid-template-columns: minmax(min-content, 2fr) minmax(min-content, 3fr);

   /* define our 3 rows for content areas 3-5. Same concept applies as the above. This time a ratio of first-second-third is 1:3:2 in regards to the remaining space. */
  grid-template-rows: minmax(min-content, 1fr) minmax(min-content, 3fr) minmax(min-content, 2fr);
}
}

Answer 2

在这里，我做了一个非常基本的示例，您可以使用它，代码被大量注释。

 * { padding: 0; margin: 0; box-sizing: border-box; } body * { padding: 10px; border: 1px solid; } [grid] { display: grid; /* this creates 2 columns and 3 column lines */ /* [line-1] columns [line-2] column [line-3] */ /* The same is true for rows even if we don't create them*/ grid-template-columns: 1fr 2fr; height: 100vh; grid-gap: 10px; } [grid]>div:nth-child(1) { /* 1/ -1 means take full width */ grid-column: 1 / -1; } [grid]>div:nth-child(2) { /* 2 / 4 Start at row line 2 stop at row line 4 */ /* if you want Content area 2 to span to the */ /* remaining row just change 4 to 5 */ grid-row: 2 / 4; } [grid]>div:nth-child(3) { /* start at column line 2 */ grid-column: 2; } [grid]>div:nth-child(4) { /* start at column line 2 */ grid-column: 2; } [grid]>div:nth-child(5) { /* start at column line 2 */ grid-column: 2; }

 <div grid> <div>Content Area 1</div> <div>Content Area 2</div> <div>Content Area 3</div> <div>Content Area 4</div> <div>Content Area 5</div> </div>