CODEWITHSUNDEEP
csscss-grid
James
James

Reputation: 1475

Element not spanning explicit and implicit columns

In a grid container with 1 column and 1 row, If I have an implicit column on the 1st row, how do I get an element in the second row (the green column in the example) to span both the explicit and implicit columns? Thanks in advance

*{
margin: 0;
padding: 0;
color: white;
padding: 0.6em
}
.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2fr;
  grid-auto-columns: auto;
}

button {
  background-color: red;
  grid-row-start: 1;
  grid-column-start: 2;
  grid-column-end: 3;
}

header {
  background-color: blue;
  grid-row-start: 1;
}
p {
  background-color: green;
  grid-column-start: 1;
  grid-column-end: -1;
  width: 100%;
}
<div class="grid">
  <header>title</header>
  <button>button</button>
  <p>paragraph</p>
</div>

Upvotes: 0

Views: 39

Answers (2)

Temani Afif
Temani Afif

Reputation: 272816

Since the implicit column is an auto one, you can make explicit and simplify your code like below

* {
  padding: 0.6em
}

.grid {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 2fr;
  color: white;
}

button {
  background-color: red;
}

header {
  background-color: blue;
}

p {
  background-color: green;
  grid-column: 1/-1;
}
<div class="grid">
  <header>title</header>
  <button>button</button>
  <p>paragraph</p>
</div>


<div class="grid">
  <header>title</header>
  <p>paragraph</p>
</div>

Upvotes: 0

001
001

Reputation: 2059

*{
margin: 0;
padding: 0;
color: white;
padding: 0.6em
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2fr;
  grid-auto-columns: auto;
}

button {
  background-color: red;
  grid-row-start: 1;
  grid-column-start: 2;
  grid-column-end: 3;
}

header {
  background-color: blue;
  grid-row-start: 1;
}
p {
  background-color: green;
  grid-column-start: 1;
  grid-column-end: 3; /*This is what changed*/
}
<div class="grid">
  <header>title</header>
  <button>button</button>
  <p>paragraph</p>
</div>

Upvotes: 1

Related Questions