Css3 Grid Layouts: New Row After Specific Element - Possible

CSS3 grid layouts: New row after specific element - possible?

You could target the first .brown after .green and set grid-column-start to 1.

.grid {  width: 120px;  display: grid;  grid-template-columns: repeat(3, 1fr);  grid-gap: 10px;}
.item {  border: 1px solid black;  height: 50px;  width: 50px;}
.green {  background: green;}
.brown {  background: brown;}
.green + .brown {  grid-column-start: 1;}

<div class="grid">  <div class="item green"></div>  <div class="item green"></div>  <div class="item green"></div>  <div class="item green"></div>  <div class="item green"></div>  <div class="item brown"></div>  <div class="item brown"></div>  <div class="item brown"></div>  <div class="item brown"></div></div>

CSS select row element on grid

This is a solution by changing the html structure a little bit.

Important Note: This will only work if you could have ability to change html structure.

#ct {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  margin-bottom: 20px;
}

.test {
  height: 100px;
}

#ct:nth-child(odd)>.test:nth-child(odd) {
  background-color: red
}

#ct:nth-child(odd)>.test:nth-child(even) {
  background-color: blue
}

#ct:nth-child(even)>.test:nth-child(odd) {
  background-color: blue
}

#ct:nth-child(even)>.test:nth-child(even) {
  background-color: red
}

<div id="ct">
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
</div>
<div id="ct">
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
</div>

How to target a specific column or row in CSS Grid Layout?

Not possible with CSS.

CSS targets HTML elements, attributes and attribute values.

Grid columns and rows have none of these "hooks".

You'll have to target the grid items directly.

You wrote:

For example, say I have a 3 row by 2 column CSS Grid Layout: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;. How would I select all elements from the 2nd column?

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>

CSS Grid unwanted column added automatically

You are specifying all the red elements into the fifth row by using grid-row-start: 5. Yes, the red elements are placed to the fifth row, and that is not immediately visible as you haven't specified an explicit row definition (say using grid-template-rows).

---

Implicit Rows

You can define the implicit row definition using something like grid-auto-rows: 50px and see that the red element are actually in the fifth row:

ul {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  grid-auto-rows: 50px; /* specify row height */  list-style: none; /* remove bullets */  padding: 0; /* remove default ul padding */}
.blue {  background-color: blue;}
.red {  background-color: red;  grid-row-start: 5;}
li {  border: 1px solid #bbb; /* border for illustration */}

<ul>  <li class="blue">    <h2>1</h2>  </li>  <li class="red">    <h2>2</h2>  </li>  <li class="blue">    <h2>3</h2>  </li>  <li class="blue">    <h2>4</h2>  </li>  <li class="red">    <h2>5</h2>  </li>  <li class="red">    <h2>6</h2>  </li>  <!-- If you delete this (or any other "red") "li" element then it's working fine -->  <li class="red">    <h2>7</h2>  </li>  <li class="blue">    <h2>8</h2>  </li></ul>

Column wrap after a specific number of child elements

You can achieve this with a combination of grid-template-rows and grid-auto-flow with a CSS like:

.parent {
    display: grid;
    grid-template-rows: repeat(6, auto);
    grid-gap: 10px;
    grid-auto-flow: column;
}

Demo

How to style a CSS Grid row?

absolute and a pseudo might be enough here :

.list {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-auto-rows: 3em;
  grid-row-gap: .5em;
  margin: 2em;
  padding: .2em;
  width: 360px;
  position: relative;
}

.list span:nth-child(3n + 1):before {
  content: '';
  height: 3em;/* matching row template */
  width: 100%;
  box-shadow: 2px 2px 6px 4px rgba(220,220,220);
  position: absolute;
}

<div class="list">
  <span>John</span>
  <span>Doe</span>
  <span>john.doe@gmail.com</span>

  <span>Susane</span>
  <span>Simpson</span>
  <span>s.simpson@gmail.com</span>
  
</div>

---

Related Topics