Vraag Hoe een specifieke kolom of rij in CSS-rasterlay-out targeten?


Is het mogelijk om een ​​specifieke rasterkolom of rij te selecteren met CSS?

Stel dat ik een CSS-rasterlay-out met 3 rijen en 2 kolommen heb: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;. Hoe selecteer ik alle elementen uit de tweede kolom? Bijvoorbeeld: grid:nth-child(column:2) (alleen mijn idee, geen geldige code).

Ik heb geprobeerd nth-child selectors op de div elementen, maar dit staat niet toe dat ik rij of kolom specificeer wanneer de items automatisch worden geplaatst door de Grid Layout-engine.

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>


13
2017-09-19 19:05


oorsprong


antwoorden:


Niet mogelijk met CSS.

CSS target HTML-elementen, -attributen en -attribuutwaarden.

Rasterzuilen en rijen bevatten geen van deze "haken".

U moet de rasteritems rechtstreeks targeten.

U schreef:

Stel dat ik een CSS-rasterlay-out met 3 rijen en 2 kolommen heb: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;. Hoe selecteer ik alle elementen uit de tweede kolom?

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>


3
2017-09-19 19:12



Als je ooit een rij wilt stylen, is hetzelfde principe van toepassing. Dat voorbeeld van bovenaf:

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>


0
2018-03-21 10:39



Om een ​​willekeurige rij te stylen, zou je een wrapper-element kunnen gebruiken met zijn display ingesteld op contents. Zie het codefragment hieronder:

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 2px;
}

.grid-item {
  border: 1px solid black;
  padding: 5px;
}

.grid-row-wrapper {
  display: contents;
}

.grid-row-wrapper > .grid-item {
  background: skyblue;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-row-wrapper">
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
  </div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
  <div class="grid-item">13</div>
  <div class="grid-item">14</div>
  <div class="grid-item">15</div>
  <div class="grid-item">16</div>
  <div class="grid-item">17</div>
  <div class="grid-item">18</div>
  <div class="grid-item">19</div>
  <div class="grid-item">20</div>
</div>

BEWERK: Zoals met alle implementaties, moet u controleren of het werkt in uw doelomgeving (en). U kunt de compatibiliteitstabel op MDN of caniuse.com controleren voor ondersteuning display: contents:


0
2018-06-07 06:07



CSS Grid sluit het concept van een row by design uit, dus u moet die semantische relatie expliciet toevoegen aan de markup.

Als u het aanmaken van de lijst beheert, kunt u een even of odd eigenschap b.v. (in JSX-generator ter illustratie / eenvoud):

for (const rowIndex in items) {
  const row = items[rowIndex]
  const parity = {[rowIndex % 2 ? 'odd' : 'even']: ''}
  for (const col in row.columns) {
     yield <div class='col' {...parity}>{col}</div>
  }
}

Welke zal iets als uitvoeren:

<div class='col' even>...</div>
<div class='col' even>...</div>
<div class='col' even>...</div>
<div class='col' odd>...</div>
<div class='col' odd>...</div>
<div class='col' odd>...</div>
<div class='col' even>...</div>
<div class='col' even>...</div>
<div class='col' even>...</div>

Dan in je CSS:

.col[even] { ... }
.col[odd] { ... }

0
2017-08-23 17:36