如何在CSS網格布局中定位特定的列或行？是否可以使用CSS選擇特定的網格列或行？例如，假設我有一個3行×2列CSS網格布局：grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;。如何從第2列中選擇所有元素？例如:( grid:nth-child(column:2)只是我的想法，不是有效的代碼）。我已經nth-child在div元素上嘗試了選擇器，但這不允許我在Grid Layout引擎自動放置項目時指定行或列。body {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;}.item {
background: #999;}<div class="item">
<p>Customer Name</p>
<p>Element 1 | Element 2</p></div><div class="item">
<p>Right Justify</p>
<p>Element 1 | Element 2</p></div><div class="item">
<p>Customer Name</p>
<p>Element 1 | Element 2</p></div><div class="item">
<p>Customer Name</p>
<p>Element 1 | Element 2</p></div><div class="item">
<p>Customer Name</p>
<p>Element 1 | Element 2</p></div><div class="item">
<p>Customer Name</p>
<p>Element 1 | Element 2</p></div><div class="item">
<p>Customer Name</p>
<p>Element 1 | Element 2</p></div>
3 回答
喵喵時光機
TA貢獻1846條經驗 獲得超7個贊
CSS無法實現。
CSS以HTML元素，屬性和屬性值為目標。
網格列和行沒有這些“鉤子”。
您必須直接定位網格項目。
你寫了：
例如，假設我有一個3行×2列CSS網格布局：
grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;。如何從第2列中選擇所有元素？
grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
height: 50vh;
background-color: gray;}grid-item {
background-color: lightgreen;}grid-item:nth-child(2n) {
border: 2px dashed red;}<grid-container> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item></grid-container>
郎朗坤
TA貢獻1921條經驗 獲得超9個贊
如果您想要設置行的樣式，則應用相同的主體。以上為例：
grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
height: 50vh;
background-color: gray;}grid-item {
background-color: lightgreen;}grid-item:nth-child(4n+3),grid-item:nth-child(4n) {
border: 2px dashed red;}<grid-container> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item></grid-container>
- 3 回答
- 0 關注
- 878 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消