Последнее обновление на 16.12.2022
CSS шахматная доска с использованием flexbox
/** { margin: 0; padding: 0; box-sizing: border-box; }*/ .chess { display: flex; width: 600px; } ul { list-style: none; display: flex; flex-wrap: wrap; width: 75%; } li { width: 12.5%; height: 50px; line-height: 50px; text-align: center; } ul li.field1:nth-child(odd) { background: black; } ul li.field2:nth-child(even) { background: black; } /* .my-right-line { background: black; width: 1%; display: flex; align-items: center; justify-content: center; } */
<div class="chess"> <ul> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field1"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> <li class="field2"></li> </ul> <div class="my-right-line"></div> </div>
Пример вывода — шахматная доска html css:
Ваш комментарий будет первым