How do I remove grid gaps when columns are not present?

user_1458442 0
Viewed 710

I have a section of html that needs to be displayed in a certain way but some elements may be optional and I'm not sure if I can do it with display:grid.

I need to have 3 columns, but the first and last one are optional and I need to remove the gap when they are not present.

Note that the markup needs to be this one without extra wrapper :

.grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 0 20px;
  align-items: center;
  background-color: lightgrey;
}
.grid > .image {
  grid-column: 1;
  grid-row: 1 / span 2;
  background-color: red;
}
.grid > .title {
  grid-column: 2;
  background-color: blue;
}
.grid > .description {
  grid-column: 2;
  background-color: purple;
}
.grid > .button {
  grid-column: 3;
  grid-row: 1 / span 2;
  background-color: green;
}
<div class="grid">
  <div class="image">image</div>
  <div class="title">title</div>
  <div class="description">description</div>
  <div class="button">button</div>
</div>
<p>&nbsp;</p>
<p>Unwanted gap when no image :</p>
<div class="grid">
  <div class="title">title</div>
  <div class="description">description</div>
  <div class="button">button</div>
</div>
<p>&nbsp;</p>
<p>Unwanted gap when no image or button :</p>
<div class="grid">
  <div class="title">title</div>
  <div class="description">description</div>
</div>

css-grid css
2 Answers

Rely on implicit column creation and keep only one explicit column

.grid {
  display: grid;
  grid-template-columns:  1fr; /* one column here */
  grid-gap: 0 20px;
  align-items: center;
  background-color: lightgrey;
}
.grid > .image {
  grid-column: -3; /* this will create an implicit column at the start */
  grid-row: span 2;
  background-color: red;
}
.grid > .title {
  background-color: blue;
}
.grid > .description {
  background-color: purple;
}
.grid > .button {
  grid-column: 2; /* this will create an implicit column at the end */
  grid-row:1/ span 2;
  background-color: green;
}
<div class="grid">
  <div class="image">image</div>
  <div class="title">title</div>
  <div class="description">description</div>
  <div class="button">button</div>
</div>
<p>&nbsp;</p>
<div class="grid">
  <div class="title">title</div>
  <div class="description">description</div>
  <div class="button">button</div>
</div>
<p>&nbsp;</p>
<div class="grid">
  <div class="image">image</div>
  <div class="title">title</div>
  <div class="description">description</div>
</div>
<p>&nbsp;</p>
<div class="grid">
  <div class="title">title</div>
  <div class="description">description</div>
</div>

user_86203330

Instead of using grid gaps, use margins on the individual elements.

.grid {
  display: grid;
  grid-auto-columns: auto 1fr auto;
  /* grid-gap: 0 20px; */
  align-items: center;
  background-color: lightgrey;
}

.grid > .image {
  margin-right: 20px; /* new */
  grid-column: 1;
  grid-row: 1 / span 2;
  background-color: red;
}

.grid > .button {
  margin-left: 20px; /* new */
  grid-column: 3;
  grid-row: 1 / span 2;
  background-color: green;
}

.grid > .title {
  grid-column: 2;
  background-color: blue;
}

.grid > .description {
  grid-column: 2;
  background-color: purple;
}
<div class="grid">
  <div class="image">image</div>
  <div class="title">title</div>
  <div class="description">description</div>
  <div class="button">button</div>
</div>
<p>&nbsp;</p>
<p>NO unwanted gap when no image :</p>
<div class="grid">
  <div class="title">title</div>
  <div class="description">description</div>
  <div class="button">button</div>
</div>
<p>&nbsp;</p>
<p>NO unwanted gap when no image or button :</p>
<div class="grid">
  <div class="title">title</div>
  <div class="description">description</div>
</div>

user_35972760
Related