CSS 根据屏幕大小的网格列

Question

我正在尝试使用 CSS 网格，列的行为应如下所示：

在移动屏幕上，我希望一列具有全宽。该专栏包括两个部分。在第一部分中有多个输入字段（也只有一列）。在第二部分中，有两列具有较小的输入字段。
在更大的屏幕（1024 像素或更宽）上应该有两列，以便两个部分彼此相邻，而第一部分应该小于第二部分。在第一部分中，输入字段现在分为两列，在第二部分中，输入字段分为三列。

我希望这是有道理的:)

我现在所拥有的有点管用，但两个部分的宽度相同。我真的不想那样，因为如果屏幕变宽，第二部分就会很晚地“跳起来”。因此，如果我的浏览器宽度为 800px，那么第一部分右侧会有很多白色 space，即使第二部分可以放在它旁边。

这是我目前得到的：

.surrounding-div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 50%), max(600px, 50%)));
};
.first-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, 200px);
    grid-column-gap: 1rem;
}
.second-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, 150px);
    grid-column-gap: 1rem;
}

这可能是一个非常糟糕的方法，因为这只是我第二次真正使用网格。我什至不确定在这里使用网格是否合适。

如果可能，我想在不使用媒体查询的情况下完成此操作

Answer 1

您可以使用 @media screen。例如：

@media screen and (max-width: 600px) {
  CSS Code here will only be executed on a screen with a width below 600px
}

使用它您可以设置每一列的大小。这也可能对您有所帮助：https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Answer 2

您可以使用媒体查询。

.grid_parent{
    display: grid;
    grid-template: number of rows/ xfr yfr; /*This is in the form is rows/columns. Since you want one column to be larger, make either x or y larger*/

/*Now initialize the grid elements in whatever way you want*/
.grid_element{
    grid-column: startcolumn/ endcolumn;
    grid-row: startrow / endrow;

/*Now the layout for the smaller screen*/
@media all and (max-width: 600px) {
    .grid_parent{
        grid-template: number of rows you want/ 1fr; /*The 1fr is important since you only want one column*/

    /*Now initialize the grid-elements as you did previously*/
    ....
    ....
}

如果您对媒体查询或 'fr' 概念不太熟悉，google 如果您仍有疑问，请发表评论。我会编辑我的答案以包含它们。

CSS 根据屏幕大小的网格列

CSS grid columns according to screensize

html

css

responsive-design

css-grid