主页 / 问题 / 1073708
Accepted
Leks
Asked:2020-01-24 04:52:51 +0000 UTC2020-01-24 04:52:51 +0000 UTC

fit-content 属性如何在网格中工作？

  • 772

.grid{
  display: grid;
  grid-template-columns: fit-content(300px) minmax(auto, 600px);
  grid-gap: 10px;
  grid-template-rows: 1fr, 1fr;
}
<div class="grid">
  <div class="">111111111111111111111111111111111111111111111111</div>
  <div class="">1</div>
  <div class="">1</div>
  <div class="">1</div>
</div>

css

1 个回答

  1. Best Answer

    该参数grid本质上是一个二维网格，它是一种用于处理元素的表格形式，其中有许多列和许多行。
    它用于将特定元素放置在页面上的正确位置，遵循表格显示的一般概念。

    借助参数，grid您可以以不违反必要显示结构的方式移动和设置元素。
    如您所知，在参数的帮助下grid，您可以做很多惊人的显示变化，设置列宽、高度、粘合多个单元格的能力等等。

    如果我们正好取参数fit-content，那么它的任务就是限制显示字段的宽度。
    例如，当使用grid-template-columns或grid-template-rows使用它们的默认值时，它们有一个参数auto auto，这意味着网格字段数据将调整为它们中内容的大小。
    使用自动内容大小调整的示例：

        .grid{
        display: grid;
        grid-template-columns: auto auto;
        grid-gap: 10px;
        grid-template-rows: auto auto;
    }
    <div class="grid">
    <div class="">111111111111111111111111111111111111111111111111</div>
    <div class="">1fkdsjhfkl shfkjhdsk jfhsdkjhf</div>
    <div class="">1</div>
    <div class="">1</div>
</div>

    在这种情况下，网格单元的大小是根据其中的文本大小设置的。（如果有更多文本，则列更宽或更高，分别）

    该属性fit-content允许在必要时设置单元格的最小长度，不再仅仅依赖于里面内容的大小，而是限制为根据元素到内容的长度指定的参数。

    例如，在grid-template-columns:e.g.中使用固定参数，grid-template-columns: auto 10px;里面的对象将被精确地裁剪到指定的 10px 大小。

    例子： 

        .grid{
        display: grid;
        grid-template-columns: auto 10px;
        grid-gap: 10px;
        grid-template-rows: auto auto;
    }
    <div class="grid">
    <div class="">111111111111111111111111111111111111111111111111</div>
    <div class="">1fkdsjhfkl shfkjhdsk jfhsdkjhf</div>
    <div class="">1</div>
    <div class="">1</div>
</div>

    使用参数fit-content，单元格大小将根据其中元素的长度趋向于其中指定的参数。
    简单来说，它将调整到空格前的单词大小或拆分前的元素的大小，但总是倾向于传递给的指定大小fit-content。例如： 

        .grid{
        display: grid;
        grid-template-columns: auto fit-content(10px);
        grid-gap: 10px;
        grid-template-rows: auto auto;
    }
    <div class="grid">
    <div class="">111111111111111111111111111111111111111111111111</div>
    <div class="">1fkdsjhfkl shfkjhdsk jfhsdkjhf</div>
    <div class="">1</div>
    <div class="">1</div>
</div>

    可以看到，字段大小不是10px，而是一直在争取。
    在这种情况下，参数会fit-content检查其中包含的元素的长度，并将大小设置为最长的单词。
    如果参数低于指定的大小，那么它将与 中指示的一样多fit-content。示例（出于演示目的设置为 100px）： 

        .grid{
        display: grid;
        grid-template-columns: auto fit-content(100px);
        grid-gap: 10px;
        grid-template-rows: auto auto;
    }
    <div class="grid">
    <div class="">111111111111111111111111111111111111111111111111</div>
    <div class="">1fk dsj hfk l shf kjh dsk jfh sdk jhf</div>
    <div class="">1</div>
    <div class="">1</div>
</div>

    在这种情况下，列大小将是最小的 - 100px。

    结果：其中元素大小最大
    的参数fit-content会根据内容自动扩大列的大小（与 中的固定数据不同10px），但最小值，小于指定的元素fit-content，它会将它们并排排列，以便它们主要放置在参数中指定的尺寸中。

    • 15

相关问题