已解決430363個問題，去搜搜看，總會有你想問的

請問如何在CSS網格布局中定位特定的列或行？

首頁猿問請問如何在CSS網格布局中定位特定...

請問如何在CSS網格布局中定位特定的列或行？

Html/CSS

慕尼黑5688855 2019-12-02 08:04:11

如何在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 回答

寶慕林4294392

TA貢獻2021條經驗獲得超8個贊

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>

反對回復 2019-12-03

慕俠2389804

TA貢獻1719條經驗獲得超6個贊

如果您想要設置行的樣式，則應用相同的主體。以上為例：

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>

反對回復 2019-12-03

3 回答
0 關注
383 瀏覽

關注

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

請問如何在CSS網格布局中定位特定的列或行？

請問如何在CSS網格布局中定位特定的列或行？

3 回答

相關問題推薦

添加回答

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

請問如何在CSS網格布局中定位特定的列或行？

請問如何在CSS網格布局中定位特定的列或行？

3 回答

相關問題推薦

添加回答

請問如何在CSS網格布局中定位特定的列或行？

請問如何在CSS網格布局中定位特定的列或行？