CODEWITHSUNDEEP
csscss-grid
Axle Max
Axle Max

Reputation: 825

How can I format a div with a minimum height AND leave the child divs top aligned using CSS Grid?

I have mocked up here [https://codepen.io/axlemax/pen/zYKWPge]

It is a copy of the basic layout of Twitter desktop [https://twitter.com/home]

enter image description here

The problem I have is I want the div called “ div class=“adcontainer” [The div with "what's happening" at the top] to be a minimum of 900px high

… but I can’t get it to do that without the 6 ad items moving from their position at the top of the div

I tried "min-height: 900px" but it just spaces out the ad items

I tried changing "grid-template-rows: 15px auto;" to "grid-template-rows: 15px 900px;" but that moved most of the ad items off screen

Can anyone help please?

[Note: Here is a Stack Snippet version. The codepen one run better IMO but some people are pedantic about using Stack Snippets]

html {
  /* border-box box model allows us to add padding and border to our elements without increasing their size */
  box-sizing: border-box;
  /* A system font stack so things load nice and quick! */
  font-family: "Helvetica Neue",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px;
  color: black;
}

*, *:before, *:after { box-sizing: inherit; }

div {
  padding: 5px 5px 5px 5px;
}

.container {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  border: solid blue;
}

.col {
  border: solid red;
  display: grid;
  grid-gap: 15px;
  grid-template-rows: 40px 1fr;
}

.twocol {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 80px 1fr;
  background-color: white;
}

.tworow {
  display: grid;
  grid-gap: 5px;
  grid-template-row: auto 1fr;
  background-color: white;  
}

.avatar {
  background-color: red;
}

.tweettext {
  background-color: red;
}

.debug {
  border: solid orange;
  background-color: orange;
}

.logo {
    height: 50px;
}

.menu {
  display: grid;
  grid-gap: 15px;
  grid-template-rows: 50px auto;
}

.menuitem {
  min-height: 50px; 
  background-color: yellow;
}

.profile {
    height: 75px;
}

.sticky {
  font-weight: 900;
  
  position: -webkit-sticky; /* Safari */
  position: sticky;
  height: 50px;
  top: 0;
}

.tweetform {
  min-height: 100px;
}

.tweetfeed {
  display: grid;
  grid-gap: 15px;
  grid-template-rows: 15px auto;
}

.tweet {
  min-height: 100px; 
  background-color: pink;
}

.adcontainer {
  display: grid;
  grid-gap: 15px;
  grid-template-rows: 15px auto;
  align-items: start;
  min-height: 600px; 
}

.aditem {
  min-height: 50px; 
  background-color: yellow;
}
<html>
  <div class="container">

    <div class="col">
      <div class="logo debug">Logo</div>
      <div class="menu debug">
        <div class="menuitem">Menu item</div>
        <div class="menuitem">Menu item</div>
        <div class="menuitem">Menu item</div>
        <div class="menuitem">Menu item</div>
        <div class="menuitem">Menu item</div>
        <div class="menuitem">Menu item</div>
        <div class="menuitem">Menu item</div>
        <div class="menuitem">Menu item</div>
      </div>
      <div class="profile debug">Profile</div>
    </div>

    <div class="col">
      <div class="sticky debug">Home</div> 
      <div class="tweetform debug">
         <div class="twocol">
            <div class="avatar">Avatar</div>
            <div class="tworow">
              <div class="avatar">
                Tweet text 
              </div>
              <div class="avatar">Buttons</div>
            </div>
          </div> 
      </div>
      <div class="tweetfeed debug">Tweet Feed
        <div class="tweet">Tweet
          <div class="twocol">
            <div class="avatar">Avatar</div>
            <div class="tworow">
              <div class="avatar">
                Tweet text 
              </div>
              <div class="avatar">Buttons</div>
            </div>
          </div>
        </div>
        <div class="tweet">Tweet</div>
        <div class="tweet">Tweet</div>
        <div class="tweet">Tweet</div>
        <div class="tweet">Tweet</div>
        <div class="tweet">Tweet</div>
        <div class="tweet">Tweet</div>
        <div class="tweet">Tweet</div>
      </div>
    </div>

    <div class="col">
      <div class="sticky debug">Search</div>
      
      <div class="adcontainer debug">What's happening
        <div class="aditem">Ad item</div>
        <div class="aditem">Ad item</div>
        <div class="aditem">Ad item</div>
        <div class="aditem">Ad item</div>
        <div class="aditem">Ad item</div>
        <div class="aditem">Ad item</div>
      </div>
    </div>

  </div>
</html>

Upvotes: 1

Views: 72

Answers (1)

Prinju Koshy Vaidyan
Prinju Koshy Vaidyan

Reputation: 485

add style to adcontainer " align-content: baseline;"

here's a link for cheatsheets https://grid.malven.co/

Upvotes: 1

Related Questions