Positioning divs using grid in css

Question

For the purpose of the diagram, I made parent_div smaller than the screen. However, it covers all the screen. Here are the code snippets of my HTML and CSS

HTMl:

#parent_div {
  width: 100%;
  height: 100vh;
  display: grid;
}

<div id="parent_div">
  <div class="DIV1"></div>
  <div class="DIV2"></div>
  <div class="DIV3"></div>
</div>

The sizing of the divs can be controlled by setting a width and height, but that's not the main issue. The main issue is: How to position the divs like the diagram above using grid?

Thank you

score 1 · Accepted Answer · answered Jan 18 '22 at 19:17

1

You do that by setting appropriate grid-template-columns and grid-template-areas:

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

#parent_div {
  border: 5px dotted red;
  height: 100vh;
  display: grid;
  padding: 100px;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "div1 div2"
    "div1 div3";
}

#parent_div> div {
  border: 3px solid green;
}

.DIV1 {
  grid-area: div1;
}

.DIV2 {
  grid-area: div2;
}

.DIV3 {
  grid-area: div3;
}

<div id="parent_div">
  <div class="DIV1"></div>
  <div class="DIV2"></div>
  <div class="DIV3"></div>
</div>

answered Jan 18 '22 at 19:17

connexo

53,704
14
91
128

Hmm. interesting. So the size of the divs is determined by the padding in #parent_div, right? I tried inputting fixed widths and heights, but then the divs separate from each other and the format was lost. However, if I increment the padding too much, when I decrease the page size, the divs will disappear (let's say > 245px). How can I resize the divs while maintaining the desired positioning? – AndF Jan 18 '22 at 19:55
@AndF Then remove the `grid-template-columns` declaration. That way it uses `auto` by default. Usually in a grid you want the grid to control the cell sizes, but there's exceptions. – connexo Jan 18 '22 at 20:16

Positioning divs using grid in css

1 Answers1