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

Html – Arrange 4 divs in cascade in 4 columns

I need to arrange 4 cascading divs that look like they are in 4 columns.

This is my html structure (I can’t modify it)

<div class="col1">
    1111
    <div class="col2">
        2222
        <div class="col3">
            3333
            <div class="col4">
                4444
            </div>
        </div>
    </div>
</div>

I need it to look like when used:

display: grid;
grid-template-columns: repeat(4, minmax(200px, 1fr));

I also tried with grid-template-areas but I have not achieved the expected results.

Tags:

2

Answers


  1. 0

    Okay so you need the container to be a grid container, and then the elements to all be the same sub level (i.e. they all need to be of the same child element). Therefore you need to restructure your html to account for this. Here’s a useful link to help you get a quick fundamental understanding of using the css grid. With that said here’s an html/css example demonstrating what you want to achieve. Hope this helps you get off with a good start.

    Please note this example uses your values and will force each column to be a minimum of 200 pixels (which you can obviously change depending on your use case).

    .grid-container{
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
}
    <div class="grid-container">
  <div class="col1">
    1111
  </div>
  <div class="col2">
    2222
  </div>
  <div class="col3">
    3333
  </div>
  <div class="col4">
    4444
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You can approximate it using flexbox

    [class*=col] {
  display: flex;
  flex: 1;
  gap: 20px;
}
    <div class="col1">
  1111
  <div class="col2">
    2222
    <div class="col3">
      3333
      <div class="col4">
        4444
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search