CSS grid - dynamic column at the start of the grid-CodePudding

I've read the following:

I understand why that's happening because I've defined an explicit grid and now the checkbox is taking 1fr.

This extra checkbox is only added in a given state. When that occurs, a class is also added to the container selecting. So, here's what I'm doing right now to try to fix this. I redefine the grid columns when that class is added.

Show code snippet

body {
  background: #131418;
  margin: 1em;
}

:root {
  --extra-section: 70px;
}

.container {
  padding: 0.5em;
  border: 1px solid silver;
  color: silver;
  /* grid */
  display: grid;
  grid-template-columns: 1fr auto repeat(3, minmax(var(--extra-section), auto));
  grid-auto-columns: var(--extra-section);
  grid-auto-flow: column;
  grid-column-gap: 0.5em;
  align-items: center;
}

.container.selecting {
  grid-template-columns: auto 1fr auto repeat(3, var(--extra-section));
}

<div class="container selecting">
  <div class="select">
    <label>
      <input type="checkbox">
    </label>
  </div>
  <div class="title">
    Lorem ipsum dolor sit amet, consectetur
  </div>
  <div class="people">
    <img src="https://i.pravatar.cc/25" />
    <img src="https://i.pravatar.cc/25" />
    <img src="https://i.pravatar.cc/25" />
  </div>
  <div class="likes">9</div>
  <div class="bookmarks">4</div>
  <div class="shares">2</div>
</div>

There's a bunch of other elements below this one just like it and they all share the same layout and CSS. When the checkbox is added to one, it's added to the rest of them as well. Kind of like a table if you would.

My goal is to give as much space to the title section as possible.

My question is:

Can I achieve that without having to redefine the template? As in, set it once, and it would adjust automatically if the checkbox is added while giving as much space to the title as possible?

I would like to solve this with grid and not flexbox because everything else in the layout uses grid and I'd love to keep it that way.

CodePudding user response：

Since you have already pointed out the problem, it seems an easy fix. Replace 1fr auto to auto 1fr as:

grid-template-columns: auto 1fr repeat(3, minmax(var(--extra-section), auto));

CodePudding user response：

Yes, you can.

The grid layout allows you to set multiple elements in the very same defined cell.

You could set .select and .title inside the first column and first-row. (similar effect to absolute positionning somehow)

If the .select _{^{(is here)}} stands ahead the .title, give the .title a margin or a padding to leave space for the checkbox.

Live example below with and without the .select box

body {
  background: #131418;
  margin: 1em;
}

:root {
  --extra-section: 70px;
}

.container {
  padding: 0.5em;
  border: 1px solid silver;
  color: silver;
  /* grid */
  display: grid;
  grid-template-columns: 1fr auto repeat(3, minmax(var(--extra-section), auto));
  grid-auto-columns: var(--extra-section);
  grid-auto-flow: column;
  grid-column-gap: 0.5em;
  align-items: center;
}

body {
  background: #131418;
  margin: 1em;
}

:root {
  --extra-section: 70px;
}

.container {
  padding: 0.5em;
  border: 1px solid silver;
  color: silver;
  /* grid */
  display: grid;
  grid-template-columns: 1fr auto repeat(3, minmax(var(--extra-section), auto));
  grid-auto-columns: var(--extra-section);
  grid-auto-flow: column;
  grid-column-gap: 0.5em;
  align-items: center;
}
.container .select,
.container .title {
  grid-column:1;
  grid-row:1;
}
.select {position:relative;/* bring it up front to be clickable */}
.container .select   .title {
  padding-inline-start:1.5rem;/* or padding-left for ltr direction */
}

<div class="container">
  <div class="select">
    <label>
      <input type="checkbox">
    </label>
  </div>
  <div class="title">
    Lorem ipsum dolor sit amet, consectetur
  </div>
  <div class="people">
    <img src="https://i.pravatar.cc/25" />
    <img src="https://i.pravatar.cc/25" />
    <img src="https://i.pravatar.cc/25" />
  </div>
  <div class="likes">9</div>
  <div class="bookmarks">4</div>
  <div class="shares">2</div>
</div>
<hr>
<div class="container">
  <div class="title">
    Lorem ipsum dolor sit amet, consectetur
  </div>
  <div class="people">
    <img src="https://i.pravatar.cc/25" />
    <img src="https://i.pravatar.cc/25" />
    <img src="https://i.pravatar.cc/25" />
  </div>
  <div class="likes">9</div>
  <div class="bookmarks">4</div>
  <div class="shares">2</div>
</div>

padding or margin on .title could also always be there ,tokeep the same alignment any time.

Note: position:relative is there to put .select on top of .title if padding is the option taken.