在 CSS Flexbox 列中制作 CSS 网格填充所有可用的 space

Question

我正在建立一个新网站，在这样做的同时，我想我应该尝试一些新技术，看看它们在实践中是如何工作的。

我有一个使用 Flexbox 布局的两栏网站，在左侧栏中，我有四个使用 CSS 网格的网格。

我想做的是让所有四个网格方块填满 Flexbox 列中所有可用的 space，但我一辈子都不知道该怎么做。

这是我的 CSS:

#flex_wrapper {
    display: flex;
    flex-direction: row;
}

#main_content {
    display: flex;
    flex-direction: column;
    flex-grow: 4;
    order: 1;
}

#right_menu {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    order: 2;
}

#grid_wrapper {
    display: grid;
    grid-template-columns: 800px 800px;
    grid-template-rows: 400px 400px;
}

#grid_item {
    display: grid;
}

我现在硬编码了网格的大小，只是为了确保 CSS 网格正常工作，但正如我所说，理想情况下，我希望所有四个框都占据整个 space 在左栏 (#main_content)，我不知道该怎么做。

Answer 1

您要找的是fr unit。该示例应如下所示：

grid-template-columns: 1fr 1fr;

在 CSS Flexbox 列中制作 CSS 网格填充所有可用的 space

Making CSS Grid fill all available space in CSS Flexbox column

html

css

flexbox

css-grid