Horizontal Border Across Entire Row of CSS Grid

Horizontal border across entire row of CSS GRID

Add a grid-gap equal to the width of your border then consider gradient to achieve this:

.wrapper {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: repeat(3, 100px);

  grid-row-gap:2px;

  background:

    repeating-linear-gradient(to bottom,

      transparent 0,

      transparent 100px,

      #ffa94d 100px,

      #ffa94d 102px /*+2px here*/

    );

}

.box {

  padding: 1em;

}

<div class="wrapper">

  <div class="box">One</div>

  <div class="box">Two</div>

  <div class="box">Three</div>

  <div class="box">Four</div>

</div>

How to create a border across an entire row using grid-template-areas

Divide and conquer!

<!DOCTYPE html>
<html>
<head>

<style>
.grid-container {
  display: grid;
  grid-template-rows: auto;
  grid-gap: 10px;
  padding: 10px;
}

.grid-container > div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.part1{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: solid 1px red;
    border-top: solid 1px red;
}
.part2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: solid 1px red;
}
.part3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: solid 1px red;
}
</style>
</head>
<body>

    <div class="grid-container">
        <div class="part1">
            <div class="item1">1</div>
            <div class="item2">2</div>
            <div class="item3">3</div>
        </div>  
        <div class="part2">
            <div class="item4">4</div>
            <div class="item5">5</div>
            <div class="item6">6</div>
        </div>
        <div class="part3">
            <div class="item7">7</div>
            <div class="item8">8</div>
            <div class="item9">9</div>
        </div>
      </div>

</body>
</html>

creating lines between grid boxes using css only

As the lines are sort of visual clues they can be drawn using pseudo before and after elements on each of the grid items.

The vertical lines are drawn using before pseudo elements positioned a the top and half way along each grid item. The grid items in the top row have their lines set to display: none.

The horizontal lines are drawn using after pseudo elements positioned at the right hand side half way down the item. The items at the end of the rows (ie every 3rd item) have their lines set to display: none.

The lines are made dashed by using a repeating background image which is a linear gradient.

Here is a simple example. Obviously you will want to change the dimensions to fit your particular requirements.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  --g: 3vw;
  grid-gap: var(--g);
}

.grid>* {
  width: 100%;
  aspect-ratio: 2 / 1;
  border: solid 1px gray;
  background: lightgray;
  position: relative;
}

.grid>*::before {
  content: '';
  height: var(--g);
  width: 2px;
  background-image: linear-gradient(gray 0 50%, transparent 50% 100%);
  background-size: auto calc(var(--g) / 4);
  position: absolute;
  z-index: -1;
  bottom: 100%;
  left: 50%;
}

.grid>*:nth-child(1)::before,
.grid>*:nth-child(2)::before,
.grid>*:nth-child(3)::before {
  display: none;
}

.grid>*::after {
  content: '';
  width: var(--g);
  height: 2px;
  background-image: linear-gradient(to right, transparent 0 50%, gray 50% 100%);
  background-size: calc(var(--g) / 4);
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 100%;
}

.grid>*:nth-child(3n)::after,
.grid>*:last-child::after {
  display: none;
  ;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

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.

CSS grid with dynamic number of rows and adjustable width

Make only the red container resizable with an initial width equal to 50% and use flex-grow:1 on the green container

function addCell(color) {
  let container = document.getElementById(color + "-container");
  
  let cell = document.createElement("div");
  cell.innerText = color;
  container.appendChild(cell).className = "container-item";
}

#container {
  border: 1px solid #ddd;
  display: flex;
  gap: 10px;
  padding: 10px;
  height: 50vh;
  resize: vertical;
  overflow: auto;
}

#green-container,
#red-container {
  display: grid;
  overflow: auto;
}
#red-container {
  border: 1px solid red;
  width: 50%;
  resize: horizontal; 
}
#green-container {
  border: 1px solid green;
  flex-grow: 1;
}

.container-item {
  padding: 10px;
  border: 1px solid black;
}

<button onclick="addCell('red')">add red cell</button>
<button onclick="addCell('green')">add green cell</button>

<div id="container">
  <div id="red-container"></div>
  <div id="green-container"></div>
</div>

css responsive grid - horizontal line between rows

If old browser support is not an issue, you could put some :before or :after code insertion to insert stuff before the start of each row

e.g. something like

<!DOCTYPE html>
<html>
<head>
<title>Quick and dirty border demo</title>
<style>

div {width: 47%; float:left; border: 1px solid #333; margin:1em 5px}

div:nth-child(2n+1):before {
    content:'';
    border-bottom:1px solid green;
    position:absolute;
    display:block;
    width: 100%;
    margin-top: -1em;
}

</style>
</head>

<body>

    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>

</body>
</html>

With different patterns (3n+1 etc) for each media query.

If you don't want a border above the first row, use (2n+3), (3n+4) ... (xn+(x+1))

Preventing double borders in CSS Grid

You may do like this :

.wrapper {
  display: inline-grid;
  grid-template-columns: 50px 50px 50px 50px;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}

.wrapper > div {
  padding: 15px;
  text-align: center;
  border-top: 1px solid black;
  border-right: 1px solid black;
}

body {
 background:pink;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

How to place a border inside a grid?

Use a pseudo-element.

In grid layout (like in flex layout), pseudo-elements on the container are considered items. Therefore, insert a pseudo that will simulate a border across your desired grid area.

.expandeble::after {
  content: "";
  border: 1px solid red;
  height: 0;
  grid-column-start: 3;
  grid-column-end: 9;
  grid-row-start: 3;
}

Sample Image

.expandeble {

  display: grid;

  height: 6.15vh;

  grid-template-columns: 15.62vw 2.01vw 21.87vw 12.08vw 19.45vw 5.76vw 2.01vw 1.18vw 5vw 15.83vw;

  grid-template-rows: minmax(18px, 1.76vw) minmax(max-content, 3.51vh) 1.76vw;

}

.expID {

  grid-column-start: 3;

  grid-row-start: 2;

}

/* new */

.expandeble::after {

  content: "";

  border: 1px solid red;

  height: 0;

  grid-column-start: 3;

  grid-column-end: 9;

  grid-row-start: 3;

}

<div class="footer">

  <div class="expandeble">

    <div class="expID">

      <label class="idLabel">XXXX</label>

    </div>

   </div>

</div>

Horizontal Border Across Entire Row of CSS Grid