时间戳

首页 > 解决方案 > 如何防止 CSS 网格占据全宽？

css - 如何防止 CSS 网格占据全宽？

问题描述

.layout-grid {
    margin: 0 auto;

    background-color: lime;

    display: grid;
    grid-template-columns: 200px 100px;
    grid-template-rows: auto;
    grid-gap: 1rem;
    grid-template-areas:
        "company company"
        "form billing";
}
<div class="layout-grid">
   <div style="grid-area: company">company</div>
   <div style="grid-area: form">form</div>
   <div style="grid-area: billing">billing</div>
</div>

在此处输入图像描述

这个网格应该是大约 316px 宽度。左列 200，右列 100 + 无论网格间隙有多大。

然而它却填满了页面的整个宽度。我该如何防止呢？

标签： css

解决方案

因为您使用的是块级网格，它总是占据可用的全部宽度。改为使用inline-grid。

.layout-grid {
    margin: 0 auto;

    background-color: lime;

    display: inline-grid;
    grid-template-columns: 200px 100px;
    grid-template-rows: auto;
    grid-gap: 1rem;
    grid-template-areas:
        "company company"
        "form billing";
}
<div class="layout-grid">
   <div style="grid-area: company">company</div>
   <div style="grid-area: form">form</div>
   <div style="grid-area: billing">billing</div>
</div>

推荐阅读