CODEWITHSUNDEEP
htmlcsscss-grid
Don Cheeto
Don Cheeto

Reputation: 121

Make a child element take a third of the parent container (Parent is styled using grid-layout)

I'd want one child element to be 1/3 the size of its parent container and the other 2/3. The parent container is in a main container that uses grid-layout. The parent container in question spans 2 columns of the main container it is contained in.

I've tried using margin, but it doesn't work: when I switch from a small screen to a large screen it moves to leave a gap. 

<div class="main-container" style="display:grid; grid-template-columns: 1fr 2fr 1fr"> 1
    <div></div>
    <div class="parent-container" style="grid-column:span 2">
        <div class="child-1"></div>
        <div class="child-2"></div>

    </div>
</div>

css code I've tried:

.child-1{
     margin-left:-20%;
 }

Child-1 must be 1/3 of parent-container and child-2 2/3 of parent-container

Upvotes: 2

Views: 1723

Answers (4)

GROVER.
GROVER.

Reputation: 4388

Using calc, something like this should do the trick:

HTML:

<div class="main-container">
    <div></div>
    <div class="parent-container">
        <div class="child-1"></div>
        <div class="child-2"></div>
    </div>
</div>

CSS:

.parent-container{
    position: relative;
    width: 100%;
    height: 100%;
}
.parent-container .child-1,
.parent-container .child-2{
    width: calc(100% / 3);
    height: 100%;
    float: left;
}

Upvotes: 0

m4n0
m4n0

Reputation: 32355

You can make use of the nested grid container. The dotted borders signify the width that the child elements take from the parent container. The solid borders are for the main container's child elements. Rest is explained in comments.

.main-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 1/4th for Extra, 2/4th for Parent, 1/4th for Extra */
  grid-auto-flow: column; /* Normal flow is row */
}

.parent-container {
  display: grid; /* Nested Grid */
  grid-template-columns: 1fr 2fr; /* 1/3rd for Child 1, 2/3rd for Child 2 of parent container*/
  grid-auto-flow: column;
}


/* Extra styling for snippet, you just need the above logic */

.main-container {
  font-size: 1.15em;
  font-family: Sans-Serif;
}

.parent-container {
  border: 2px solid black;
}

.parent-container>div {
  background: #6660CE;
  padding: 10px;
  color: #fff;
  text-align: center;
  border: 2px dotted black;
}

.main-container>div {
  background: #6660CE;
  padding: 10px;
  color: #fff;
  text-align: center;
}
<div class="main-container">
  <div class="extra">Extra</div>
  <div class="parent-container">
    <div class="child-1">Child 1 </div>
    <div class="child-2">Child 2</div>
  </div>
  <div class="extra">Extra</div>
</div>

Upvotes: 1

Japs
Japs

Reputation: 1052

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

.child:nth-child(1) {
  grid-area: 1 / 1;
  background-color: #9341aa;
}

.child:nth-child(2) {
  grid-area: 2 / 1 / span 1 / span 2;
  background-color: #ab41aa;
}

.child:nth-child(3) {
  grid-area: 3 / 1 / span 1 / span 3;
  background-color: #cab332;
}
<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42374

Simply give the parent element two columns with grid-template-columns, where the second column is twice the size of the first column (i.e. 1fr and 2fr).

This can be seen in the following:

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

.child-1 {
  background: red;
}

.child-2 {
  background: blue;
}

.child {
  height: 50px;
}
<div class="container">
  <div class="child child-1"></div>
  <div class="child child-2"></div>
</div>

Upvotes: 1

Related Questions