How to Draw Vertical Separators in The Interior Gaps of a CSS Grid of Varying Columns

Is it possible to draw vertical separators in the interior gaps of a CSS grid of varying columns?

You can use pseudo element on all the grid item where you will simply have overlap and be sure to cover all the gaps:

html,body {  margin: 0;}
.container {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));  grid-column-gap: 0.5rem;  overflow:hidden; /* Hide the overflow */  position:relative;}
.item {  box-sizing: border-box;  position:relative;}
.item:before {  content:"";  position:absolute;  top:0;  right:-0.25rem; /* Half the gap */  height:100vh; /* Big height*/  width:1px;  background:#000;}
.box {  background-color: pink;  height: 2rem;  margin: 0.5rem;}

<div class="container">  <div class="item">    <div class="box"></div>  </div>  <div class="item">    <div class="box"></div>  </div>  <div class="item">    <div class="box"></div>  </div>  <div class="item">    <div class="box"></div>  </div>  <div class="item">    <div class="box"></div>  </div>  <div class="item">    <div class="box"></div>  </div></div>

Separator Between grid columns

Adding border would add extra 1px , so it breaks the layout, instead of adding border to grid column, try adding a div inside of it and give border to it ...

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>

Grid css selector

You can:

• Make a grid using CSS grid
• Use ::after to add a line after each box
• Use ::nth-child(3n) to hide this ::after line for every 3rd box (last box in the row) using display:none

I've written up a little example here:
https://codepen.io/annaazzam/pen/xxZPpXg

How to have different column widths across rows in CSS Grid?

To make this work you need to find a common divider for all three lengths (42.5%, 48.75% and 52.5%). With a common divider you can create the right number of columns to accommodate each grid area.

In my example below, I created 400 columns of .25% width each (400 * .25 = 100%).

It then spanned grid areas across the correct number of columns:

45.00 / .25 = 180

48.75 / .25 = 195

52.50 / .25 = 210

It may not be exactly what you're looking for, but hopefully the concept helps you move forward.

No changes to the HTML.

.atul {  display: grid;  grid-template-columns: repeat(400, .25%);  grid-auto-rows: 50px; /* for demo only */  grid-row-gap: 30px;   /* note that you need to create column gaps through                           the proper distribution of columns, because if you                           use `grid-column-gap`, it will add a gap between                           all 400 columns */}
.card:nth-child(1) {  grid-column: 1 / 180;  grid-row: 1 / 3;}
.card:nth-child(2) {  grid-column: -1 / -210; /* starting at the end line of the grid                             (works only in explicit grids) */  grid-row: 1 / 2;}
.card:nth-child(3) {  grid-column: -1 / -210;  grid-row: 2 / 3;}
/* starting at the 4th item, target even items only */.card:nth-child(n + 4):nth-child(even) {  grid-column: 1 / 195;}
.card:nth-child(n + 4):nth-child(odd) {  grid-column: -1 / -195;}
.card:nth-child(4),.card:nth-child(5) {  grid-row: 3;}
.card:nth-child(6),.card:nth-child(7) {  grid-row: 4;}
.card:nth-child(8),.card:nth-child(9) {  grid-row: 5;}
.card:nth-child(10),.card:nth-child(11) {  grid-row: 6;}
.card:nth-child(12),.card:nth-child(13) {  grid-row: 7;}

<div class="atul">  <div class="card" style="background-color: red;">Card 1</div>  <div class="card" style="background-color: green;">Card 2</div>  <div class="card" style="background-color: yellow;">Card 3</div>  <div class="card" style="background-color: skyblue;">Card 4</div>  <div class="card" style="background-color: skyblue;">Card 5</div>  <div class="card" style="background-color: skyblue;">Card 6</div>  <div class="card" style="background-color: skyblue;">Card 7</div>  <div class="card" style="background-color: skyblue;">Card 8</div>  <div class="card" style="background-color: skyblue;">Card 9</div>  <div class="card" style="background-color: skyblue;">Card 10</div>  <div class="card" style="background-color: skyblue;">Card 11</div>  <div class="card" style="background-color: skyblue;">Card 12</div>  <div class="card" style="background-color: skyblue;">Card 13</div></div>

Dynamically resize columns in css grid layout with mouse

What you are looking to achieve is possible using only css. I've modified your example. The main takeaways are this:

1. Most importantly, try not to insert raw content in your semantic layout tags. Use header, paragraph, and list tags rather than text and br tags. This makes your code both easier to read and easier to reason about. Many of your problems happened because of how reflow is handled in grid areas.
2. Use grid-template to simplify your layout as it will make breakpoint reflow easier later on.
3. Use overflow: auto; along with specifying resize: vertical/horizontal. Without setting overflow, resize will fail.
4. Use min/max width/height values to create boundaries for resizing.

body {    margin: 10px;    height: 100%;}
main {    display: grid;    border: 3px dotted red;    padding: 3px;    grid-gap: 3px;        grid-template:     "nav head" min-content    "nav main" 1fr        / min-content 1fr;}
nav {    grid-area: nav;    border: 3px dotted blue;    overflow: auto;    resize: horizontal;        min-width: 120px;    max-width: 50vw;}
header {    grid-area: head;    border: 3px dotted orange;    overflow: auto;    resize: vertical;        min-height: min-content;    max-height: 200px;}
section {    grid-area: main;    border: 3px dotted gray;}

<main>  <nav>    <ul>      <li>Nav Item</li>      <li>Nav Item</li>      <li>Nav Item</li>      <li>Nav Item</li>      <li>Nav Item</li>      <li>Nav Item</li>    </ul>  </nav>
  <header>    <h1>Header Title</h1>    <small>Header Subtitle</small>  </header>
  <section>    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  </section></main>

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.

---

Related Topics