2

I am trying to create a layout, where I have columns, with dynamic content, I would like to shrink or expand these columns according to the content (much like pInterest).

From what I am seeing online, most of the examples, they have divs, with background color, and they show you how to layout these and show nice designs, but when I tried to do that and add content, I faced this issue.

Any hint is appreciated. Here's my code: 

body {
  color: #fff;
  font-family: 'Nunito Semibold';
  text-align: center;
}

#content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  max-width: 960px;
  margin: 0 auto;
}

#content div {
  background: #3bbced;
  padding: 30px;
}

#content div:nth-child(even) {
  background: #777;
  padding: 30px;
}

.nested {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  /*grid-column: span 3;*/
}

.nested p {
  border: 1px solid #fff;
  padding: 20px;
  margin: 0;
}
<div id="content">
  <div>I don't want to stretch that long</div>
  <div>me too</div>
  <div>3
    <p>Image or anything can be here .. Image or anything can be here .. Image or anything can be here .. Image or anything can be here .. Image or anything can be here .. Image or anything can be here .. Image or anything can be here .. Image or anything
      can be here .. </p>
  </div>
  <div class="nested">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
  </div>
  <div>5</div>
  <div>6</div>
</div>
Vadim Ovchinnikov
  • 13,327
  • 5
  • 62
  • 90
DMZ
  • 185
  • 9

1 Answers1

0

You should give the divs inside of content a class so you can adjust them as needed. By setting your max width on those, they will proceed to the next line. You may also want to use "word-wrap: break-word;" to make sure there is no overflow of the divs.

Here is an example of what you should be doing: W3Schools

jkittle1209
  • 1
  • 1
  • It's not just for words, for example, if you put an image in that big div, I want the other 2 divs to stay short. Is there a way to do that with css-grid? – DMZ Apr 18 '18 at 18:48
  • Perhaps I am not understanding, because this works with images as well. set the max width and it will automatically only expand that particular div as needed depending on content. It will not change the other divs – jkittle1209 Apr 18 '18 at 18:53
  • I don't think I get what you're saying. Can you show me an example on the code I pasted? – DMZ Apr 18 '18 at 18:55