W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
用于控制在網(wǎng)格列中元素的大小和放置方式的功能類。
Class
|
Properties
|
---|---|
col-auto | grid-column: auto; |
col-span-1 | grid-column: span 1 / span 1; |
col-span-2 | grid-column: span 2 / span 2; |
col-span-3 | grid-column: span 3 / span 3; |
col-span-4 | grid-column: span 4 / span 4; |
col-span-5 | grid-column: span 5 / span 5; |
col-span-6 | grid-column: span 6 / span 6; |
col-span-7 | grid-column: span 7 / span 7; |
col-span-8 | grid-column: span 8 / span 8; |
col-span-9 | grid-column: span 9 / span 9; |
col-span-10 | grid-column: span 10 / span 10; |
col-span-11 | grid-column: span 11 / span 11; |
col-span-12 | grid-column: span 12 / span 12; |
col-span-full | grid-column: 1 / -1; |
col-start-1 | grid-column-start: 1; |
col-start-2 | grid-column-start: 2; |
col-start-3 | grid-column-start: 3; |
col-start-4 | grid-column-start: 4; |
col-start-5 | grid-column-start: 5; |
col-start-6 | grid-column-start: 6; |
col-start-7 | grid-column-start: 7; |
col-start-8 | grid-column-start: 8; |
col-start-9 | grid-column-start: 9; |
col-start-10 | grid-column-start: 10; |
col-start-11 | grid-column-start: 11; |
col-start-12 | grid-column-start: 12; |
col-start-13 | grid-column-start: 13; |
col-start-auto | grid-column-start: auto; |
col-end-1 | grid-column-end: 1; |
col-end-2 | grid-column-end: 2; |
col-end-3 | grid-column-end: 3; |
col-end-4 | grid-column-end: 4; |
col-end-5 | grid-column-end: 5; |
col-end-6 | grid-column-end: 6; |
col-end-7 | grid-column-end: 7; |
col-end-8 | grid-column-end: 8; |
col-end-9 | grid-column-end: 9; |
col-end-10 | grid-column-end: 10; |
col-end-11 | grid-column-end: 11; |
col-end-12 | grid-column-end: 12; |
col-end-13 | grid-column-end: 13; |
col-end-auto | grid-column-end: auto; |
使用 ?col-span-{n}
? 功能類使元素跨越 n 列。
<div class="grid grid-cols-3 gap-4">
<div class="...">1</div>
<div class="...">2</div>
<div class="...">3</div>
<div class="col-span-2 ...">4</div>
<div class="...">5</div>
<div class="...">6</div>
<div class="col-span-2 ...">7</div>
</div>
使用 ?col-start-{n}
? 和 ?col-end-{n}
? 功能類,使元素以第 n 條網(wǎng)格線為起點或終點。這些功能類也可以與 ?col-span-{n}
? 功能類結(jié)合使用,來跨越特定數(shù)量的列。
請注意,CSS 網(wǎng)格線從 1 開始,而不是 0,所以 6 列網(wǎng)格中的全寬元素將從第 1 條網(wǎng)格線開始,第 7 條網(wǎng)格線結(jié)束。
<div class="grid grid-cols-6 gap-4">
<div class="col-start-2 col-span-4 ...">1</div>
<div class="col-start-1 col-end-3 ...">2</div>
<div class="col-end-7 col-span-2 ...">3</div>
<div class="col-start-1 col-end-7 ...">4</div>
</div>
要在特定的斷點處控制元素列的放置方式,可以在任何現(xiàn)有的 grid-column 功能類前添加 ?{screen}:
? 前綴。例如,使用 ?md:col-span-6
? 來僅在中等尺寸及以上的屏幕上應(yīng)用 ?col-span-6
? 功能類。
<div class="col-span-2 md:col-span-6"></div>
關(guān)于 Tailwind 的響應(yīng)式設(shè)計功能的更多信息,請查看 響應(yīng)式設(shè)計 文檔。
默認(rèn)情況下,Tailwind 包含用于處理最多 12 列的網(wǎng)格的網(wǎng)格列實用程序。您可以通過自定義 Tailwind 主題配置的 ?gridColumn
?、?gridColumnStart
?和 ?gridColumnEnd
?部分來更改、添加或刪除這些。
為了創(chuàng)建更多的 ?col-{value}
? 功能類來直接控制 ?grid-column
? 簡寫屬性,請自定義 Tailwind 主題配置的 ?gridColumn
?部分。
// tailwind.config.js
module.exports = {
theme: {
extend: {
gridColumn: {
'span-16': 'span 16 / span 16',
}
}
}
}
我們在內(nèi)部將其用于 ?col-span-{n}
? 功能。請注意,因為這直接配置了 ?grid-column
? 速記屬性,所以我們直接在值名中包含了 ?span
?這個詞,而不是自動加入到類名中。這意味著您可以自由地添加您想做的任何事情—它們不只是 ?span
?功能。
要添加新的 ?col-start-{n}
? 功能類,請使用 Tailwind 主題配置的 ?gridColumnStart
?部分。
// tailwind.config.js
module.exports = {
theme: {
extend: {
gridColumnStart: {
'13': '13',
'14': '14',
'15': '15',
'16': '16',
'17': '17',
}
}
}
}
要添加新的 ?col-end-{n}
? 功能類,請使用 Tailwind 主題配置的 ?gridColumnEnd
?部分。
// tailwind.config.js
module.exports = {
theme: {
extend: {
gridColumnEnd: {
'13': '13',
'14': '14',
'15': '15',
'16': '16',
'17': '17',
}
}
}
}
在 主題自定義文檔 中了解更多關(guān)于自定義默認(rèn)主題的信息。
默認(rèn)情況下,只為 grid-column 功能生成響應(yīng)式變體。
您可以通過修改 ?tailwind.config.js
? 文件中 ?variants
?部分的 ?gridColumn
?、?gridColumnStart
?和 ?gridColumnEnd
?屬性來控制為 grid-column 功能生成哪些變體。
// tailwind.config.js
module.exports = {
variants: {
// ...
gridColumn: ['responsive', 'hover'],
gridColumnStart: ['responsive', 'hover'],
gridColumnEnd: ['responsive', 'hover'],
}
}
在 配置變體文檔 中了解更多關(guān)于配置變體的信息。
如果您不打算在您的項目中使用 grid-column 功能,您可以通過在配置文件的 ?corePlugins
?部分將 ?gridColumn
?, ?gridColumnStart
?和 ?gridColumnEnd
? 屬性設(shè)置為 ?false
? 來完全禁用它們:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
gridColumn: false,
gridColumnStart: false,
gridColumnEnd: false,
}
}
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: