There is such a chess layout, I want to make adaptability, you can use Bootstrap. But when it came to adaptability, I won’t put my mind on how to do it, because I can’t insert <div class="row"></div> into tr . It seems to me that I did not correctly make this layout with chess blocks. I ask your advice.
*{ margin: 0; padding: 0; } body{ font-family: Calibri; font-size: 18px; } .wrapper{ width: 1170px; margin: 0 auto; background-color: #eefaf9; } /*.shahmatka{ background-color: #eefaf9; }*/ .shahmatka td{ width: 168px; height: 168px; vertical-align: top; } .shahmatka .item{ padding-left: 17px; padding-top: 30px; color: #fff; } .img{ width: 168px; height: 168px; background-position: center; background-repeat: no-repeat; } /*вот так сделал шахматную доску :) */ .shahmatka tr:first-child td:nth-child(odd){ border: 1px solid #44c3be; background: #0cb1aa; } .shahmatka tr:nth-child(2) td:nth-child(even){ border: 1px solid #44c3be; background: #0cb1aa; } .shahmatka tr:nth-child(3) td:nth-child(odd){ border: 1px solid #44c3be; background: #0cb1aa; } .shahmatka .info{ background: #14cac2 !important; color: black !important; vertical-align: top; font-size: 45px; font-weight: bold; padding-left: 51px; padding-top: 10px; } /*Блок растянутый в таблице*/ .shahmatka .title{ height: 150px; background-color: #04726d; display: table-cell; vertical-align: middle; } .block-center { box-sizing: border-box; display: flex; width: 1170px; flex-direction: row; justify-content: center; align-items: center; align-content: center; padding: 51px; background: #04726d; color: #ffffff; height: 150px; } <div class="wrapper"> <table cellspacing="0" cellpadding="0" class="shahmatka"> <div class="row"> <tr> <td colspan="2" class="info"><p>Блоки обучения</p></td> <td style="display:none;"></td> <td><p class="item">АРТ</p></td> <td class="img" style="background-image: url('./img/img2.png')"></td> <td><p class="item">СПОРТ</p></td> <td class="img" style="background-image: url('./img/img3.png')"></td> <td><p class="item">STEM</p></td> </tr> </div> <tr> <td></td> <td><p class="item">Гуманитарный блок</p></td> <td class="img" style="background-image: url('./img/img4.png')"></td> <td><p class="item">ІТ</p></td> <td class="img" style="background-image: url('./img/img5.png')"></td> <td><p class="item">МЕДИА</p></td> <td class="img" style="background-image: url('./img/img6.png')"></td> </tr> <tr> <td><p class="item">PERFOMANS</p></td> <td class="img" style="background-image: url('./img/img1.png')"></td> <td><p class="item">ПОЛИГЛОТ</p></td> <td class="img" style="background-image: url('./img/img7.png')"></td> <td><p class="item">БИЗНЕС</p></td> <td class="img" style="background-image: url('./img/img8.png')"></td> <td><p class="item">Социальная ответственность</p></td> </tr> </table> </div> 