CSS Grid layout with equal width sections columns and sections with borders/margins

Question

I am looking to have a grid layout (3 columns) of repeating sections. I want the sections to have border and margins as well as have equal width columns throughout all sections. I have gotten most of the way there but am battling between no border/margin using display: contents; or unequal widths. Is what I am asking for css subgrid? (poorly supported), is there another way or am I left to apply border/margin to children?

.grid {
  display: grid;
  grid-template-columns: auto auto 1fr;
  padding: 10px;
  border: 2px solid red;
}

.sectionWrap {
  display: contents;
  border: 3px solid purple;
  margin: 6px;
}

.c1,
.c2,
.c3 {
  border: 1px solid blue;
}

<div class="grid">
  <div class="sectionWrap">
    <div class="c1">
      shorter text
    </div>
    <div class="c2">
      2
    </div>
    <div class="c3">
      3
    </div>
  </div>
  <div class="sectionWrap">
    <div class="c1">
      longer text...............
    </div>
    <div class="c2">
      2
    </div>
    <div class="c3">
      3
    </div>
  </div>
</div>
<span> unfortunately missing my border and margin using display: contents.

score 3 · Accepted Answer · answered Jun 05 '20 at 22:09

Margin can be replaced with gap and border with individual border on your elements:

.grid {
  display: grid;
  grid-template-columns: auto auto 1fr;
  row-gap:12px;
  padding: 12px;
  border: 2px solid red;
}

.sectionWrap {
  display: contents;
}


.c1 {
  border:3px solid purple;
  border-right:1px solid blue;
}
.c2 {
  border:3px solid purple;
  border-right:1px solid blue;
  border-left:1px solid blue;
}
.c3 {
  border:3px solid purple;
  border-left:1px solid blue;
}

<div class="grid">
  <div class="sectionWrap">
    <div class="c1">
      shorter text
    </div>
    <div class="c2">
      2
    </div>
    <div class="c3">
      3
    </div>
  </div>
  <div class="sectionWrap">
    <div class="c1">
      longer text...............
    </div>
    <div class="c2">
      2
    </div>
    <div class="c3">
      3
    </div>
  </div>
</div>
<span>

thank you, had not though about grid gap in that way, but makes sense. — cycle4passion, Jun 05 '20 at 22:23

score 0 · Answer 2 · answered Jun 05 '20 at 22:20

You can keep all of your columns the same width by changing grid-template-columns: auto auto 1fr; to grid-template-columns: 1fr 1fr 1fr; This is how your code looks with this change and I also removed the display: contents;

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 10px;
  border: 2px solid red;
}

.sectionWrap {
  border: 3px solid purple;
  margin: 6px;
}

.c1,
.c2,
.c3 {
  border: 1px solid blue;
}

<div class="grid">
  <div class="sectionWrap">
    <div class="c1">
      shorter text
    </div>
    <div class="c2">
      2
    </div>
    <div class="c3">
      3
    </div>
  </div>
  <div class="sectionWrap">
    <div class="c1">
      longer text...............
    </div>
    <div class="c2">
      2
    </div>
    <div class="c3">
      3
    </div>
  </div>
</div>
<span> unfortunately missing my border and margin using display: contents.

thx for reply, but this changes the layout, looking for it to look like mine just with border/margin. — cycle4passion, Jun 05 '20 at 22:23
Ok, I wasn't sure on that as you said simply adding `display:contents;` changed the width. Please look at Temani Afif's answer then. I believe it is what you want. Also FYI, you can use my `grid-template-columns: 1fr 1fr 1fr;` change in conjunction with his code and it will make all your width's the same. — John, Jun 05 '20 at 22:26

CSS Grid layout with equal width sections columns and sections with borders/margins

2 Answers2