Add a Rule Between CSS Grid Columns and Rows

Add a rule between CSS grid columns and rows

Is there a css grid property to add a rule (vertical line) between grid columns, and a rule (horizontal line) between grid rows, in the same way, or similar, that column-rule works?

NO

There is no such property.

CSS Grid rows and columns are entirely virtual and only indicate the start and end point of their respective areas for the browser's layout engine.

How to add a vertical line between grid items?

You can do this with background and easily adjust even if you change the template columns:

.grid-container {  display: grid;  grid-template-columns: 1fr 1fr;  background:linear-gradient(#000,#000) center/2px 100% no-repeat;  grid-gap: 16px;  margin:5px;}
.grid-item {  height: 20px;  background-color: red;  position: relative;}

.grid-container.another {  grid-template-columns: 2fr 1fr;  background-position:66.5% 0;}
.grid-container.column-3 {  grid-template-columns: 1fr 1fr 1fr;  background:    linear-gradient(#000,#000) center/2px 100% no-repeat,    linear-gradient(#000,#000) center/2px 100% no-repeat;  background-position:33% 0, 67% 0;}

<div class="grid-container">  <div class="grid-item"></div>  <div class="grid-item"></div>  <div class="grid-item"></div>  <div class="grid-item"></div>  <div class="grid-item"></div>  <div class="grid-item"></div></div>
<div class="grid-container another">  <div class="grid-item"></div>  <div class="grid-item"></div>  <div class="grid-item"></div>  <div class="grid-item"></div>  <div class="grid-item"></div>  <div class="grid-item"></div></div>
<div class="grid-container column-3">  <div class="grid-item"></div>  <div class="grid-item"></div>  <div class="grid-item"></div>  <div class="grid-item"></div>  <div class="grid-item"></div>  <div class="grid-item"></div></div>

Adding a dividing line across all columns in CSS Grid

Since you're open to using media queries, and the number of columns is known (2, 3 or 4), you may be able to use the background color of the grid and pseudo-elements to make your layout work.

revised jsfiddle demo

ul {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(21%, 1fr));  grid-column-gap: 2px;  background-color: red;  border: 1px solid black;      padding: 0;  margin: 0;  list-style: none;}
@media ( max-width: 700px ) {  ul { grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); }  ul::before { content: ""; background-color: white; order: 1; }  ul::after  { content: ""; background-color: white; order: 2; }  }
@media ( max-width: 400px ) {  ul { grid-template-columns: repeat(auto-fill, minmax(40%, 1fr)); }  ul::before { content: none; }  ul::after  { content: none; }  }
li {  padding: 5px;  text-align: center;  background-color: white;}

<ul>  <li> A </li>  <li> B </li>  <li> C </li>  <li> D </li></ul>

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>

How to place elements with same class on a column and different rows with css grid?

Add grid-auto-flow: dense

.grid{
  display:grid; 
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense;
  gap:12px;
}

.grid>div{
  padding:12px;
  margin:0;
  color:#fff;
  background:#222;
}

.choice{
  grid-column-start: 1;
}
.match{
  grid-column-start:2;
}

<div class="grid">
 <div class="choice">Choice 1</div>
 <div class="choice">Choice 2</div>
 <div class="choice">Choice 3</div>
 <div class="match">Match 1</div>
 <div class="match">Match 2</div>
 <div class="match">Match 3</div>
</div>

Adding column lines to css grid system

Maybe help you

.MyTable {  width: auto;  height: 1000px;  display: grid;  grid-template-columns: repeat(365, 1fr);  counter-reset: counter -1;  margin-top: 1.5em;}
div {  border: 1px solid black;  width: 1em;  counter-increment: counter;}
.MyTable div:nth-child(7n) {  border-color: red;  position: relative;}
.MyTable div:nth-child(7n)::before {  content: counter(counter);  position: absolute;  top: -1.4em;}

<div class="MyTable">  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div>

---

Related Topics