时间戳

首页 > 解决方案 > 为什么 CSS Grid 将所有项目的宽度设置为网格中最小项目的最小内容？

html - 为什么 CSS Grid 将所有项目的宽度设置为网格中最小项目的最小内容？

问题描述

我有一个简单的网格，它有 12 行和一列。我假设每行的宽度默认设置为最小内容（我的假设）（图 1）。但是，似乎如果我将文本添加到作为标题的第一行，所有行的宽度都会调整大小，而不仅仅是我更改的宽度（图 2）。

为了解决这个问题，我可以将网格的宽度设置为我需要的值，这将正确调整所有行的大小。但是，我想了解为什么 CSS 将所有行（标签和输入字段）定位到标题元素的最小内容，而不是将每一行单独定位到其最小内容

在此处输入图像描述

在此处输入图像描述

    #checkout-form fieldset {
        display: grid;
        grid-template-rows: repeat(12, 25px);
        align-items: start;
        /* this will align properly 
        width: 70%; */
    }

    #checkout-form fieldset>h2{
       grid-row: span 2;
     }

标签： htmlcsscss-grid

解决方案

由于只有一列，所有行都将具有相同的大小，并且它们基于标题元素，因为它具有最大的宽度。为什么会这样？因为这就是它的指定方式，换句话说，就是默认行为。

在内联和块格式化上下文中，网格容器的自动块大小是它的最大内容大小。

如果您使用grid-template-columns属性定义了列大小，则将适用以下内容。

当网格在最大内容约束（最小内容约束）下调整大小时，网格容器的最大内容大小（最小内容大小）是相应轴上网格容器的轨道大小（包括间距）的总和.

顺便说一句，我不是这些文件的专家。

编辑：这能回答你的问题吗？

推荐阅读