Как вы это сверстали бы?

Question

[Liuonid]

В общем нет идей.

Answer 1

[Арсений Матыцин]

nth-child + медиа-запросы + макет под запросы + border

Comments

[Liuonid]

Так долго. Да такая идея была(промелькнула) в начале.

[Арсений Матыцин]

Liuonid, table

[strelok011]

Вижу таблицу - верстаю гридом :)

[Арсений Матыцин]

strelok011, да тут без разницы на чем верстать, но автор вопроса явно хочет сэкономить минуты 3 на раздумия и пару строчек кода, поэтому самое простое дать внутренние границы и убрать наружные — table. Он так умеет. Другое дело, что потом все равно придется все переделать, но как грится скупой сидит дольше за компухтером.

Answer 2

[an_tropa]

"Верстка - знакомство с объектами"
А какие собственно могут тут быть идеи? раз блок два блок три блок и т.д. по моему банальная вещь, не?
Как одно из множества решений:

code html+ксс

<div class="box">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="clearfix"></div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
</div>

.box {
  background-color: #2A2C2F;
  width: 1000px;
	height: 500px;
  padding: 20px 20px;
}
.clearfix {
  clear: both;
}
.item {
  float: left;
  display: block;
  width: 100px;
  height: 80px;
  background-color: #fff;
  text-align: center;
  line-height: 80px;
}

Answer 3

[Руслан Федорчук]

Я тоже хочу такое сделать на свой сайте скиньте мне ссылку на страничку