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

HTML table/grid/flex positioning

https://imgur.com/a/xD7GoCw

What would be the best method to position the blocks in a similar manner as in the picture?

I tried to use tables, but in this case it’s not possible to properly center the number to the text.

There is no way to expand a row into several columns in the grid?

Sorry if the question is stupid, I’m just learning.

Tags:

2

Answers


  1. 0

    You can use CSS grid to achieve that. Something like that should do the job:

    .parent {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 5px;
grid-row-gap: 5px;
}

.div1 { grid-area: 1 / 1 / 2 / 3; }
.div2 { grid-area: 1 / 3 / 2 / 5; }
.div3 { grid-area: 1 / 5 / 3 / 7; }
.div4 { grid-area: 2 / 1 / 3 / 3; }
.div5 { grid-area: 2 / 3 / 3 / 5; }
.div6 { grid-area: 3 / 1 / 4 / 3; }
.div7 { grid-area: 3 / 3 / 4 / 7; }
    <div class="parent">
<div class="div1">1 </div>
<div class="div2">2 </div>
<div class="div3">3 </div>
<div class="div4">4 </div>
<div class="div5">5 </div>
<div class="div6">6 </div>
<div class="div7">7 </div>
</div>
    Login or Signup to reply.
  2. 0

    I hope this can help

    .container {
  display: flex;
}

.block-1-4-6 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.block-2-3-5-7 {
  flex: 2;
  display: flex;
  flex-direction: column;
}

.block-2-3-5 {
  flex: 2;
  display: flex;
}

.block-7 {
  flex: 1;
}
    <div class="container">
      <div class="block-1-4-6">
        <div class="block-1">Block 1</div>
        <div class="block-4">Block 4</div>
        <div class="block-6">Block 6</div>
      </div>
      <div class="block-2-3-5-7">
        <div class="block-2-3-5">
            <div class="block-2-5">
                <div class="block-2">Block 2</div>
                <div class="block-5">Block 5</div>
            </div>
          <div class="block-3">Block 3</div>
        </div>
        <div class="block-7">Block 7</div>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search