Question 188036 in Html Question posted in
Some basic documentation can be found here.

Html – Fill empty column space using grid

I have a 3 column, 2 row grid, where I want the element gridContent to span the empty space of contentSide when I set that elements width of 50%.

Fill with CONTENT

Above you can see where I have put a line I want gridContent filling. Currently, my CSS code looks like the following:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.gridContainer {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto);
  gap: 5px;
  margin: .75rem;
}

.contentHead {
  grid-column: 1 / 4;
  background-color: green;
  height: 5rem;
}

.contentSide {
  grid-column: 1 / 1;
  grid-row: 2 / 3;
  background-color: red;
  width: 50%;
}

.contentBody {
  grid-column: 2 / 4;
  background-color: yellow;
}
<div class="gridContainer">
  <div class="contentHead">
    <h1>HEADER</h1>
  </div>
  <div class="contentSide">
    <h1>NAVIGATION</h1>
  </div>
  <div class="contentBody">
    <h1>CONTENT</h1>
  </div>
</div>

Setting the grid-template-rows to auto does not seem to work…

Does anyone know how I could fill this empty void with contentBody utilizing grid?

Tags:

2

Answers


  1. 0

    Try grid-template-columns: repeat(3, 1fr);

    Using fr units will give you fractions of the space available, which seems closer to what you’re looking for.

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.gridContainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 5px;
  margin: .75rem;
}

.contentHead {
  grid-column: 1 / 4;
  background-color: green;
  height: 5rem;
}

.contentSide {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background-color: red;
}

.contentBody {
  grid-column: 2 / 4;
  background-color: yellow;
}
    <div class="gridContainer">
  <div class="contentHead">
    <h1>HEADER</h1>
  </div>
  <div class="contentSide">
    <h1>NAVIGATION</h1>
  </div>
  <div class="contentBody">
    <h1>CONTENT</h1>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Just make a bit more columns, and apply padding-left for .content-body:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  margin: .75rem;
}

.content-head {
  grid-column: span 6;
  background-color: green;
  min-height: 5rem;
}

.content-side {
  background-color: red;
}

.content-body {
  grid-column: span 5;
  background-color: yellow;
  padding-left: 20%;
}
    <div class="grid-container">
  <div class="content-head">
    <h1>HEADER</h1>
  </div>
  <div class="content-side">
    <h1>NAVIGATION</h1>
  </div>
  <div class="content-body">
    <h1>CONTENT</h1>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search