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

Question

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> </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> </p>
<p>Unwanted gap when no image or button :</p>
<div class="grid">
<div class="title">title</div>
<div class="description">description</div>
</div>

Answer 1

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> </p>
<div class="grid">
<div class="title">title</div>
<div class="description">description</div>
<div class="button">button</div>
</div>
<p> </p>
<div class="grid">
<div class="image">image</div>
<div class="title">title</div>
<div class="description">description</div>
</div>
<p> </p>
<div class="grid">
<div class="title">title</div>
<div class="description">description</div>
</div>

Answer 2

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> </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> </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>