CODEWITHSUNDEEP
htmlcssmultiple-columns
Ru Leva
Ru Leva

Reputation: 11

Wrap div inside columns?

My website layout has 3 columns: enter image description here

I need insert div inside 2 columns, so the result should be:enter image description here

div { column-count:3; column-gap:3rem }
<div>
  <p>Column text</p>
  <p>...</p>
</div>

I have tried many methods and no one works. Can you help me?

Upvotes: 0

Views: 129

Answers (1)

PatMan10
PatMan10

Reputation: 618

Use css grid. Here is an example.

div[id="grid"] {
  display: grid;
  grid-template-rows: repeat(10, 30px);
  grid-template-columns: repeat(3, 100px);
}

div[id="grid"] > div {
  background-color: pink;
  border: 2px solid cyan;
}

div[id="more-space"]{
  grid-row: 1 / 3;
  grid-column: 2 / 4;
}
 <div id="grid">
    <div>grid item</div>
    <div>grid item</div>
    <div>grid item</div>
    <div id="more-space" >use more space</div>
    <div>grid item</div>
    <div>grid item</div>
    <div>grid item</div>
    <div>grid item</div>
    <div>grid item</div>
    <div>grid item</div>
    <div>grid item</div>
    <div>grid item</div>
    <div>grid item</div>
    <div>grid item</div>
    <div>grid item</div>
 </div>

Upvotes: 1

Related Questions