CSS网格列根据屏幕化

Question

我正在尝试使用CSS网格，并且列应该以这样的方式行事：

• 在移动屏幕上，我想要一个列女巫具有完整的宽度。该列包括两个部分。在第一部分中，有多个输入字段（也只有一个列）。在第二部分中，有两个列有较小的输入字段。
• 在较大的屏幕上（1024px或更宽），应该有两个列，以便两个部分相互相邻，而第一部分应小于第二部分。在第一部分中，输入字段现在分为两列，在第二部分中，输入字段分为三列。

我希望这是有道理的:)

我现在拥有的有效作品，但是这两个部分具有相同的宽度。我真的不想要这样，因为像第二部分一样，如果屏幕更宽，则很晚。因此，如果我有例如800px的浏览器宽度，那么即使第二部分可以安装在旁边，第一部分的右侧也有很多空白。

这就是我到目前为止的事情：

.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屏幕。例如：

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

使用此功能您可以设置每列的大小。 This might help you as well: 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”概念，请使用谷歌搜索，如果您仍然有疑问，请引起评论。我将编辑我的答案，以包括它们。