如何制作具有 2 列的回應式網格？一個應最多占用寬度的 20%，另一個應占用寬度的其余部分。這是迄今為止我對那種行的 CSS：
const StyledRow = styled.div`
display: grid;
grid-template-columns: 20% auto;
align-items: center;
margin-bottom: 15px;
`
html是這樣的：
<StyledRow>
<label htmlFor="firstEmail" style={{justifySelf: 'end', paddingRight: 10}}>Email:</label>
<Input id="firstEmail" type="email" value={firstEmail} onChange={handleChangeFirstEmail}/>
</StyledRow>
這不是回應式的，因為在小寬度螢屏上，標簽仍然與輸入在同一行。我怎樣才能實作第二列在第一列之下。我也嘗試過：
grid-template-columns: repeat(auto-fill, minmax(20%, 80%));
然后兩列都占據了 80% 的寬度，所以它們最終在大螢屏上一個接一個。
那么我怎樣才能實作第一列的最大寬度為 20%，另一列占據其余部分，同時在小螢屏上回應？
uj5u.com熱心網友回復：
您可以使用“fr”單位來占用剩余空間的一小部分。因此，對于您的第二列，您使用 1fr 來占據剩余空間的 1 部分，即 100%。fr 單位將考慮列/行之間的間隙。
grid-template-columns: 20% 1fr;
至于回應小螢屏使用@media 查詢。https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
@media screen and (max-width: 1024px) {
grid-template-columns: 1fr;
}
uj5u.com熱心網友回復：
body {
padding: 2rem;
margin: 0 auto;
max-width: 60rem;
}
.container {
display: flex;
flex-wrap: wrap;
--gutter: 1rem;
margin: calc(var(--gutter) / 2 * -1);
--breakpoint: 40rem;
color:white;
}
.container > * {
background-color: #000;
min-width: clamp(var(--min-width, 0px), (var(--breakpoint) - 100%) * 999, 100% - var(--gutter));
min-height: 20vh;
margin: calc(var(--gutter) / 2);
}
.container > *:first-child {
width:30%;
}
.container > *:nth-child(2) {
flex-grow:1;
}<div class="container">
<div>One</div>
<div>Two</div>
</div>我們為容器提供負邊距以彌補容器子項的額外邊距。
min-width 是這種方法的關鍵。鉗位的中間值作為開關來識別斷點并放大效果，而最小值和最大值可以根據開關產生效果。所以當開關打開時，即斷點大于 40rem，如果我們減去 100%（父級的寬度），我們得到一個正數，我們通過乘以 999 來夸大它，這樣過渡不是平滑而是突然的。然后鉗位的最大值生效。如果我們關閉即為負，則鉗位的最小值生效。
我希望其余的代碼是不言自明的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/337326.html
下一篇：導航欄起始位置MidWeb