Question 374434 in Html Question posted in
Some basic documentation can be found here.

Html – Is it possible to get this grid or flexbox layout in css?

So I want to create a grid or flexbox layout which looks something like this

Desired Layout.

So all of the data inside each box of the image is dynamic so i am not sure about the size of every box. I am using tailwind css and plain HTML, CSS, JS.

I am creating a parent with class = grid grid-cols-3 and very column has a class = col-span-1. With this the body is evenly divided into 3 columns but the box of the next line is starting from the end of the longest element of the previous line, i.e. each row height is determined by the longest box of that row. So this is how it is turning out to be

Actual layout.

I can use class = row-span-2 at the longest box but as said I don’t know what will be the size of each box so I cant use class = row-span-2.
Here is what I have. Please assume Box x has all the html and css code for that desired box.

<div class=" grid grid-cols-3 m-12 gap-12 justify-center">
    <div id="post" class="max-h-fit h-fit rounded-xl overflow-hidden">
        <Box 1/>
    </div>
    <div id="post2" class="max-h-fit h-fit rounded-xl overflow-hidden">
        <Box 2/>
    </div>
    <div id="post3" class="max-h-fit h-fit rounded-xl overflow-hidden">
        <Box 3/>
    </div>
    <div id="post4" class="max-h-fit h-fit rounded-xl overflow-hidden">
        <Box 4/>
    </div>
    <div id="post5" class="max-h-fit h-fit rounded-xl overflow-hidden">
        <Box 5/>
    </div>
    <div id="pos6t" class="max-h-fit h-fit rounded-xl overflow-hidden">
        <Box 6/>
    </div>
</div>
Tags:

3

Answers


  1. 0

    What you are looking for is called a Bento grid layout.
    You can check some examples here

    But coming back to your question, using CSS Columns you can achieve the layout

    Check this example:

    <div class="parent columns-3 gap-4">
  <div class="mb-4 h-24 break-inside-avoid rounded-xl bg-[pink] p-4"></div>
  <div class="mb-4 h-32 break-inside-avoid rounded-xl bg-[tomato] p-4"></div>
  <div class="mb-4 h-36 break-inside-avoid rounded-xl bg-[skyblue] p-4"></div>
  <div class="mb-4 h-32 break-inside-avoid rounded-xl bg-[gold] p-4"></div>
  <div class="mb-4 h-16 break-inside-avoid rounded-xl bg-[violet] p-4"></div>
  <div class="mb-4 h-32 break-inside-avoid rounded-xl bg-[lightcoral] p-4"></div>
  <div class="mb-4 h-16 break-inside-avoid rounded-xl bg-[royalblue] p-4"></div>
  <div class="mb-4 h-64 break-inside-avoid rounded-xl bg-[lightgreen] p-4"></div>
</div>

    Result: https://play.tailwindcss.com/7teTDt3LMZ

    result

    Login or Signup to reply.
  2. 0

    You can make three grid columns and put elements inside each of those:

    The height attributes are added to simulate longer amounts of text or larger sized content, you can remove it and it should still function the same

    <div class="grid grid-cols-3">
  <div>
    <div class="m-4 mr-2 bg-green-200" style="height: 150px">Box 1 here</div>
    <div class="m-4 mr-2 bg-blue-200" style="height: 200px;">Box 2 here</div>
  </div>
  <div>
    <div class="m-4 mx-2 bg-yellow-200" style="height: 300px">Box 3 here</div>
    <div class="m-4 mx-2 bg-red-200" style="height: 400px;">Box 4 here</div>
  </div>
  <div>
    <div class="m-4 ml-2 bg-pink-200" style="height: 250px">Box 5 here</div>
    <div class="m-4 ml-2 bg-purple-200" style="height: 200px;">Box 6 here</div>
  </div>
</div>

    enter image description here

    https://play.tailwindcss.com/XvhOwesYEN

    Login or Signup to reply.
  3. 0

    One way is to make a parent div flex with flex-row & wrap the inner three div in.

    <div class="flex flex-row">
    <div class="">
      <Box 1/>
      <Box 2/>
      <Box 3/>
      ...
    </div>
    <div class="">
      <Box 4/>
      <Box 5/>
      ...
    </div>
    <div class="">
      <Box 6/>
      ...
    </div>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search