Search code examples
htmlcsscss-grid

Grid expanding other elements in grid

I'm facing a problem where expanding(adding more content so that it is stretching) one item in grid expands all others even though the others have no extra content that would require them to stretch out leaving extra blank space beneath.

This is how I set my grid:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 5px 5px;
  grid-template-areas: "vcard vcard vcard3 vcard3" "vcard vcard vcard3 vcard3" "vcard2 vcard2 vcard3 vcard3" "vcard2 vcard2 vcard4 vcard4" "vcard2 vcard2 vcard4 vcard4";
  grid-gap: 10px;
  border: 1px solid #fff;
}

.vcard {
  grid-area: vcard;
}

.vcard2 {
  grid-area: vcard2;
}

.vcard3 {
  grid-area: vcard3;
}

.vcard4 {
  grid-area: vcard4;
}

When I add extra text to div.vcard it stretches as expected, however also the div.vcard3 and div.vcard4 stretch themselves even though I add nothing extra to them. Is there a way to avoid this behavior? So that only the elements that should expand would expand.

Here is working example: codepen

Solution

  • By adding content to your grid items you're not only expanding the items, you're also expanding the row heights.

    Couple that with the fact that grid items are set, by default, to align-items: stretch, and you have items that expand the full height of the grid area (which can consist of multiple rows).

    You could override the default by setting align-items: start, but then they'll just shrink to the height of the item, while not affecting the row height (because it is being set by the tallest content).

    * {
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  box-sizing: border-box;
  font-family: Ubuntu, Helvetica, Verdana, Arial, sans-serif;
}

html {
  background: linear-gradient(-10deg, #C62828, #BA68C8);
  min-height: 100vh;
  font-size: 22px;
}

body {
  padding: 50px;
}

code {
  margin: 1px 5px;
  padding: 2px 5px 1px 5px;
  font-family: monospace;
  border-radius: 2px;
  border: 1px dotted #fff;
}

p {
  margin: 25px 10px;
}

h2 {
  text-align: center;
  margin-top: 50px;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.outlined {
  height: 200px;
  border: 1px solid #fff;
  margin-bottom: 50px;
}

.grid>* {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid #fff;
  border-radius: 2px;
  padding: 20px;
  /*margin: 10px;*/
  text-align: center;
}

.grid a {
  display: block;
}

.grid>a:hover {
  background-color: rgba(255, 255, 255, 0.25);
  text-decoration: none;
  transition: background-color ease 0.5s;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 5px 5px;
  grid-template-areas: "vcard vcard vcard3 vcard3" "vcard vcard vcard3 vcard3" "vcard2 vcard2 vcard3 vcard3" "vcard2 vcard2 vcard4 vcard4" "vcard2 vcard2 vcard4 vcard4";
  grid-gap: 10px;
  border: 1px solid #fff;
  
  /* NEW */
  align-items: start;
}

.vcard {
  grid-area: vcard;
}

.vcard2 {
  grid-area: vcard2;
}

.vcard3 {
  grid-area: vcard3;
}

.vcard4 {
  grid-area: vcard4;
}
    <html>

<head>
</head>

<body>
  <div class="grid">
    <div class="vcard">Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque
      torquatos. Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu
      justo aeque torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius
      ad. Pri eu justo aeque torquatos.ec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea.
      Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.
    </div>
    <div class="vcard2">Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque
      torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu
      justo aeque torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius
      ad. Pri eu justo aeque torquatos.</div>
    <div class="vcard3">Grid item 3</div>
    <div class="vcard4">Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque
      torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu
      justo aeque torquatos.</div>
  </div>
</body>

</html>

    It seems that what you're looking for is a masonry layout. Here's a post that may help: