css-grid 相关问题

我知道有类似的问题，但这是专门询问如何使用CSS Grid Layout做到这一点。因此，我们有了以下基本的网格设置：HTML（带有侧栏）： ]]] 不要用grid-template-columns定义列明确地。改为使列隐式，然后使用grid-auto-columns定义其宽度。 [当第二列（.content）不存在时，这将允许第一列（.sidebar）占用该行中的所有空间。 .grid { display: grid; grid-auto-columns: 1fr 200px; } .content { grid-column: 1; } .sidebar { grid-column: 2; } .grid > * { border: 1px dashed red; /* demo only */ } <p>With side bar:</p> <div class="grid"> <div class="content"> <p>content</p> </div> <div class="sidebar"> <p>sidebar</p> </div> </div> <p>No side bar:</p> <div class="grid"> <div class="content"> <p>content</p> </div> </div> 您可以使用内容大小调整关键字来接近，例如： .grid { display: grid; grid-template-columns: 1fr fit-content(200px); } .sidebar { width: 100%; } fit-content关键字将查看内容的大小，并像max-content一样起作用，直到达到您传递的值。实际上，您可能不需要在侧边栏粘贴大小，因为内容可能规定至少200像素（例如），但是您可以尝试使用此大小。我想我现在已经知道了这个问题的明确答案。到目前为止，答案存在的问题是它们没有解释如何处理位于主要内容左侧的侧边栏（主要是因为我在原始问题中没有要求）。 <div class="grid"> <nav> <p>navigation</p> </nav> <main> <p>content</p> </main> <aside> <p>sidebar</p> </aside> </div> 您可以使用此CSS： .grid { display: grid; grid-template-columns: fit-content(200px) 1fr fit-content(200px); } nav, aside { width: 100%; } /* ensures that the content will always be placed in the correct column */ nav { grid-column: 1; } main { grid-column: 2; } aside { grid-column: 3; } 这也是网格区域的好用例 .grid { display: grid; grid-template-columns: fit-content(200px) 1fr fit-content(200px); grid-template-areas: "nav content sidebar"; } nav, aside { width: 100%; } /* ensures that the content will always be placed in the correct column */ nav { grid-area: nav; } main { grid-area: content; } aside { grid-area: sidebar; } 与IE兼容的版本如下所示： .grid { display: -ms-grid; display: grid; -ms-grid-columns: auto 1fr auto; grid-template-columns: auto 1fr auto; } nav, aside { width: 100%; /* Ensures that if the content exists, it takes up max-width */ max-width: 200px; /* Prevents the content exceeding 200px in width */ } /* ensures that the content will always be placed in the correct column */ nav { -ms-grid-column: 1; grid-column: 1; } main { -ms-grid-column: 2; grid-column: 2; } aside { -ms-grid-column: 3; grid-column: 3; }

css css-grid

回答 3 投票 7

什么是支持CSS网格布局的IOS上最古老的firefox版本？

我设法在此处获取有关支持CSS网格布局的版本的信息。但它不包含ios上chrome / firefox的条目。我设法找到了受支持的最旧版本的chrome ...

css firefox browser css-grid grid-layout

回答 1 投票 0

如何使用CSS Grid和容器类将其分为两列？

我有一个容器类，需要在整个站点中使用（考虑Bootstrap样式）。我不能将display：grid放在容器上并在其中定义列，因为我需要重用.container。如果我...

html css css-grid grid-layout

回答 4 投票 0

网格项未按指定范围跨越

我正在尝试使网格项目（.item3）完全跨越并且向下3行。在按列对其进行跨接之后，将不会对行进行跨接。但是，如果我将行跨度值增加到4，它将起作用。但是...