Question 341554 in CSS Question posted in
Some basic documentation can be found here.

CSS grid auto column with additional div at every column

How do I add additional fixed width column in the grid column template. Lets say I have 12 columns in a container with auto width, and I wanted to add 12 more columns in between with fixed width.

This is what I tried but unable to figure out how to make the additional column as fixed width and rest columns are auto width in the same container and no wrap.

.grid {
  display: grid;
  grid-template-columns: repeat(25, 1fr);
}

.grid .col {
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
  width: 100%;
  flex: 1;
}

.additional-div {
  background-color: rgba(0, 0, 0, 0.1);
  width: 24px;
}
<div class="grid">
  <div class="additional-div"></div>
  <div class="col">1</div>
  <div class="additional-div"></div>
  <div class="col">2</div>
  <div class="additional-div"></div>
  <div class="col">3</div>
  <div class="additional-div"></div>
  <div class="col">4</div>
  <div class="additional-div"></div>
  <div class="col">5</div>
  <div class="additional-div"></div>
  <div class="col">6</div>
  <div class="additional-div"></div>
  <div class="col">7</div>
  <div class="additional-div"></div>
  <div class="col">8</div>
  <div class="additional-div"></div>
  <div class="col">9</div>
  <div class="additional-div"></div>
  <div class="col">10</div>
  <div class="additional-div"></div>
  <div class="col">11</div>
  <div class="additional-div"></div>
  <div class="col">12</div>
  <div class="additional-div"></div>
</div>
Tags:

2

Answers


  1. 0

    Here’s what you might want:

    .grid {
  display: grid;
  grid-template-columns: repeat(12, min-content 1fr) min-content;
}

.grid .col {
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
}

.additional-div {
  background-color: rgba(0, 0, 0, 0.1);
  width: 24px;
}
    <div class="grid">
  <div class="additional-div"></div>
  <div class="col">1</div>
  <div class="additional-div"></div>
  <div class="col">2</div>
  <div class="additional-div"></div>
  <div class="col">3</div>
  <div class="additional-div"></div>
  <div class="col">4</div>
  <div class="additional-div"></div>
  <div class="col">5</div>
  <div class="additional-div"></div>
  <div class="col">6</div>
  <div class="additional-div"></div>
  <div class="col">7</div>
  <div class="additional-div"></div>
  <div class="col">8</div>
  <div class="additional-div"></div>
  <div class="col">9</div>
  <div class="additional-div"></div>
  <div class="col">10</div>
  <div class="additional-div"></div>
  <div class="col">11</div>
  <div class="additional-div"></div>
  <div class="col">12</div>
  <div class="additional-div"></div>
</div>

    It would also be simpler to use flexbox to achieve the same layout:

    .grid {
  display: flex;
}

.grid .col {
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
  flex: 1;
}

.additional-div {
  background-color: rgba(0, 0, 0, 0.1);
  flex: 0 0 24px;
}
    <div class="grid">
  <div class="additional-div"></div>
  <div class="col">1</div>
  <div class="additional-div"></div>
  <div class="col">2</div>
  <div class="additional-div"></div>
  <div class="col">3</div>
  <div class="additional-div"></div>
  <div class="col">4</div>
  <div class="additional-div"></div>
  <div class="col">5</div>
  <div class="additional-div"></div>
  <div class="col">6</div>
  <div class="additional-div"></div>
  <div class="col">7</div>
  <div class="additional-div"></div>
  <div class="col">8</div>
  <div class="additional-div"></div>
  <div class="col">9</div>
  <div class="additional-div"></div>
  <div class="col">10</div>
  <div class="additional-div"></div>
  <div class="col">11</div>
  <div class="additional-div"></div>
  <div class="col">12</div>
  <div class="additional-div"></div>
</div>
    Login or Signup to reply.
  2. 0

    In addition to @Hao Wu’s answer, you can use this ruleset to make responsive your grid.

    .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
}

    You can set the width of the fixed-size with the 24px area and the 1fr area will grow as your content size.

    You should specify the width of the additional-div class within the minmax function, instead of its own ruleset.

    .additional-div {
  /* width: 24px; */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search