Question

我正在建立一个新的网站，当我这样做时，我想我会尝试一些新技术，看看它们在实践中的运作方式。

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

我想要做的是让所有四个网格方块填满Flexbox列中的所有可用空间，但我不能在我的生活中找出如何做到这一点。

这是我的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网格正常工作但正如我所说，理想情况下我希望所有四个方框占据左侧列的整个空间（#main_content），我不知道该怎么做。

Answer 1

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

grid-template-columns: 1fr 1fr;

使CSS Grid填充CSS Flexbox列中的所有可用空间

1 个答案: