Flexbox: Layout with rowspan without wrappers

Question

My HTML is similar to the following example:

<div class="wrapper">
   <div class="wrapper_item">1</div>
   <div class="wrapper_item">2</div>
   <div class="wrapper_item">3</div>
   <div class="wrapper_item">4</div>
   <div class="wrapper_item">5</div>
   <div class="wrapper_item">6</div>
   <div class="wrapper_item">7</div>
</div>

And I need layout like this:

The height of blocks can be different.
How can I do it with flexbox without other wrappers?

Without additional wrappers it cannot be done. Flexbox is not a grid system: http://stackoverflow.com/a/34481128/3597276 — Michael Benjamin, Jul 28 '16 at 11:41

score -2 · Answer 1 · answered Jul 28 '16 at 11:22

You can use tables. That will be easy to implement.

<html>
<head>
 <style>
 table{
    width:100px;
    height:100px;
    border:solid 3px black;
    border-collapse: collapse;
 }
 td{
     background:grey;
     border:solid 3px black;
     padding:0px;
 }
 </style>
 </head>
 <body>
  <table>
   <tr>
     <td rowspan="2" colspan="2">1</td>
     <td>2</td>
     <td>3</td>
    </td>
    <tr>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
         <td>6</td>
         <td>7</td>
         <td>8</td>
         <td>9</td>
    </tr>
    </table>
 </body>
</html>

Hope it will help.

Thank you. This can help. But tables are not compatible with the media — Алексей Наземнов, Jul 28 '16 at 12:31

Flexbox: Layout with rowspan without wrappers

1 Answers1