將移動 div 重新組織到桌面，同時它仍然保持響應並且有時不顯示元素

Question

是否可以按照下圖中的方式將 div 從移動視圖重新組織到桌面？ 我嘗試使用網格，但結果並不令人滿意，因為正確元素的高度被拉伸了。 此外，當某些 div 可能不可見、根本不顯示時，通過網格處理情況也很困難，因為用戶沒有提供那種類型的內容。 任何想法？ 謝謝！

將 div 從移動視圖重新組織到桌面視圖

一種可能但不好的解決方案：

 .wrapper { border: 1px solid red; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-columns: 150px auto; grid-template-areas: "ab" "ad" "cd" "ce" "fe"; grid-gap: 15px; padding: 10px; }.red, .blue { height: 60px; line-height: 60px; text-align: center; font-weight: bold; color: #fff; font-size: 15px; }.red { background: red; }.blue { background: blue; width: auto; }.a {grid-area: a}.b {grid-area: b}.c {grid-area: c}.d {grid-area: d}.e {grid-area: e}.f {grid-area: f}

 <div class="wrapper"> <div class="a red">A</div> <div class="b blue">B</div> <div class="c red">C</div> <div class="d blue">D</div> <div class="e blue">E</div> <div class="f red">F</div> </div>

Answer 1

好吧，我不是特別喜歡它（我不喜歡依賴grid-auto-flow: dense ，出於可訪問性的原因：視覺順序與 DOM 順序不同，因此輔助技術以不同的方式看待內容），那里是CSS網格的一種方式：

 /* CSS custom properties for easier and more convenient theming and maintenance: */:root { --black: hsl(0 0 0); --blue: hsl(197 71% 73%); --blueColumn: 2; --columns: 1fr 3fr; --red: hsl(0 100% 50%); --white: hsl(0 100% 100%); } /* a simple CSS reset to remove default margins and padding, and have elements sized using the border-box method, which includes border-width and padding in the declared size: */ *, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; }.wrapper { border: 1px solid var(--black); color: var(--white); /* using grid layout: */ display: grid; /* assigning a gap between adjacent elements within the grid: */ gap: 0.5em; /* to have the grid arrange the content in such a way that empty space is minimised within the grid: */ grid-auto-flow: dense; /* setting the number of columns, and sizes, to the value held in the --columns var (declared on the:root): */ grid-template-columns: var(--columns); /* this was my best guess, adjust to taste: */ grid-template-rows: repeat(7, 3em); /* equivelent to 'width' in English language sites; the inline-axis being left-to-right; here we set the preferred size to 60vw, but the element will maintain a minimum size of 20em and a maximum size of 1200px: */ inline-size: clamp(20em, 60vw, 1200px); /* in English language sites the block-axis is top-to-bottom, this declaration assigns a margin to the element on that block-axis: */ margin-block: 1em; /* sets a margin on the inline-axis: */ margin-inline: auto; }.wrapper > div { /* adjust to taste, this is simply to center the contents of the various <div> elements: */ display: grid; font-weight: 900; padding: 1em; place-content: center; }.red { background-color: var(--red); /* placing the.red elements on grid-column 1: */ grid-column: 1; /* using the grid-row to have.red elements span over two grid-rows: */ grid-row: span 2; }.blue { background-color: var(--blue); /* places the.blue elements into the value held in the --blueColumn custom property: */ grid-column: var(--blueColumn); /* assigns the.blue elements to have a grid-row span of the value of the --rowSpan property (if declared), otherwise of 1; these properties are declared in the HTML in this example: */ grid-row: span var(--rowSpan, 1); } /* when the screen is less than 500px wide (unfortunately Firefox doesn't yet support logical properties in @media queries): */ @media screen and (max-width: 500px) { /* we redeclare some of the properties: */:root { --blueColumn: auto; --columns: 1fr; }.blue, .red { /* and here we set the grid-row to span 1 row: */ grid-row: span 1; } }

 <div class="wrapper"> <div class="a red">A</div> <div class="b blue">B</div> <div class="c red">C</div> <div class="d blue" style="--rowSpan: 4">D</div> <div class="e blue" style="--rowSpan: 4">E</div> <div class="f red">F</div> </div>

JS 小提琴演示。

並且，為了說明為什么需要grid-auto-flow: dense ，首先沒有聲明該屬性：

 /* CSS custom properties for easier and more convenient theming and maintenance: */:root { --black: hsl(0 0 0); --blue: hsl(197 71% 73%); --blueColumn: 2; --columns: 1fr 3fr; --red: hsl(0 100% 50%); --white: hsl(0 100% 100%); } /* a simple CSS reset to remove default margins and padding, and have elements sized using the border-box method, which includes border-width and padding in the declared size: */ *, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; }.wrapper { border: 1px solid var(--black); color: var(--white); /* using grid layout: */ display: grid; /* assigning a gap between adjacent elements within the grid: */ gap: 0.5em; /* setting the number of columns, and sizes, to the value held in the --columns var (declared on the:root): */ grid-template-columns: var(--columns); /* this was my best guess, adjust to taste: */ grid-template-rows: repeat(7, 3em); /* equivelent to 'width' in English language sites; the inline-axis being left-to-right; here we set the preferred size to 60vw, but the element will maintain a minimum size of 20em and a maximum size of 1200px: */ inline-size: clamp(20em, 60vw, 1200px); /* in English language sites the block-axis is top-to-bottom, this declaration assigns a margin to the element on that block-axis: */ margin-block: 1em; /* sets a margin on the inline-axis: */ margin-inline: auto; }.wrapper>div { /* adjust to taste, this is simply to center the contents of the various <div> elements: */ display: grid; font-weight: 900; padding: 1em; place-content: center; }.red { background-color: var(--red); /* placing the.red elements on grid-column 1: */ grid-column: 1; /* using the grid-row to have.red elements span over two grid-rows: */ grid-row: span 2; }.blue { background-color: var(--blue); /* places the.blue elements into the value held in the --blueColumn custom property: */ grid-column: var(--blueColumn); /* assigns the.blue elements to have a grid-row span of the value of the --rowSpan property (if declared), otherwise of 1; these properties are declared in the HTML in this example: */ grid-row: span var(--rowSpan, 1); } /* when the screen is less than 500px wide (unfortunately Firefox doesn't yet support logical properties in @media queries): */ @media screen and (max-width: 500px) { /* we redeclare some of the properties: */:root { --blueColumn: auto; --columns: 1fr; }.blue, .red { /* and here we set the grid-row to span 1 row: */ grid-row: span 1; } }

 <div class="wrapper"> <div class="a red">A</div> <div class="b blue">B</div> <div class="c red">C</div> <div class="d blue" style="--rowSpan: 4">D</div> <div class="e blue" style="--rowSpan: 4">E</div> <div class="f red">F</div> </div>

JS 小提琴演示。

上面顯示了grid-auto-flow: dense在桌面顯示中用其布局算法填充的明顯差距，盡管移動（ max-width: 500px ）顯示效果很好。

或者，我們可以改為使用grid-auto-flow: column ：

 /* CSS custom properties for easier and more convenient theming and maintenance: */:root { --black: hsl(0 0 0); --blue: hsl(197 71% 73%); --blueColumn: 2; --columns: 1fr 3fr; --red: hsl(0 100% 50%); --white: hsl(0 100% 100%); } /* a simple CSS reset to remove default margins and padding, and have elements sized using the border-box method, which includes border-width and padding in the declared size: */ *, ::before,::after { box-sizing: border-box; margin: 0; padding: 0; }.wrapper { border: 1px solid var(--black); color: var(--white); /* using grid layout: */ display: grid; /* assigning a gap between adjacent elements within the grid: */ gap: 0.5em; grid-auto-flow: column; /* setting the number of columns, and sizes, to the value held in the --columns var (declared on the:root): */ grid-template-columns: var(--columns); /* this was my best guess, adjust to taste: */ grid-template-rows: repeat(7, 3em); /* equivelent to 'width' in English language sites; the inline-axis being left-to-right; here we set the preferred size to 60vw, but the element will maintain a minimum size of 20em and a maximum size of 1200px: */ inline-size: clamp(20em, 60vw, 1200px); /* in English language sites the block-axis is top-to-bottom, this declaration assigns a margin to the element on that block-axis: */ margin-block: 1em; /* sets a margin on the inline-axis: */ margin-inline: auto; }.wrapper > div { /* adjust to taste, this is simply to center the contents of the various <div> elements: */ display: grid; font-weight: 900; padding: 1em; place-content: center; }.red { background-color: var(--red); /* placing the.red elements on grid-column 1: */ grid-column: 1; /* using the grid-row to have.red elements span over two grid-rows: */ grid-row: span 2; }.blue { background-color: var(--blue); /* places the.blue elements into the value held in the --blueColumn custom property: */ grid-column: var(--blueColumn); /* assigns the.blue elements to have a grid-row span of the value of the --rowSpan property (if declared), otherwise of 1; these properties are declared in the HTML in this example: */ grid-row: span var(--rowSpan, 1); } /* when the screen is less than 500px wide (unfortunately Firefox doesn't yet support logical properties in @media queries): */ @media screen and (max-width: 500px) { /* we redeclare some of the properties: */:root { --blueColumn: auto; --columns: 1fr; }.blue, .red { /* and here we set the grid-row to span 1 row: */ grid-row: span 1; } }

 <div class="wrapper"> <div class="a red">A</div> <div class="b blue">B</div> <div class="c red">C</div> <div class="d blue" style="--rowSpan: 4">D</div> <div class="e blue" style="--rowSpan: 4">E</div> <div class="f red">F</div> </div>

JS 小提琴演示。

這在桌面上看起來不錯，但在移動設備上，這些行顯然是亂序顯示的。

參考：

• background-color 。
• block-size 。
• box-sizing 。
• clamp() 。
• CSS 自定義屬性。
• CSS 邏輯屬性。
• display 。
• font-weight 。
• gap 。
• grid-auto-flow 。
• grid-column 。
• grid-row 。
• grid-template-columns 。
• grid-template-rows 。
• inline-size 。
• margin 。
• margin-block 。
• margin-inline 。
• @media 。
• padding 。
• padding-block 。
• padding-inline 。
• place-content 。
• var() 。

參考書目：

• “ CSS 媒體查詢的完整指南”，CSS 技巧。
• “網格完整指南”，CSS 技巧。
• “ 網格布局的基本概念”，Mozilla 開發者網絡。
• “ 使用媒體查詢”，Mozilla 開發者網絡。