Создание CSS сетки без Div контейнеров

Question

Здравствуйте stackoverflowers,

Я, имеющие этот кусок HTML кода:

<div class="container"> 
    <div class="block row1 column1"></div> 
    <div class="block row1 column2"></div> 
    <div class="block row1 column3"></div> 
    <div class="block row2 column1"></div> 
    <div class="block row2 column2"></div> 
    <div class="block row2 column3"></div> 
    <div class="block row3 column1"></div> 
    <div class="block row3 column2"></div> 
    <div class="block row3 column3"></div> 
</div> 

Как я могу создать 3x3 сетку из дивы с помощью CSS без изменения HTML?

С наилучшими пожеланиями, Деннис

Edit: Есть ли кто-нибудь знает, как сохранить блоки в виде квадрата и по центру. Например, контейнер равен 700px x 700px, а блоки 100px x 100px.

Answer 1

Это следует сделать это:

.block { 
    float:left; 
    width:33.3%; 
    box-sizing:border-box; 
    margin:0; 
} 

float позволяет дивы быть на каждой стороне другие, ширина 1/3.

EDIT:

Если вы хотите, чтобы блоки прямоугольной формы, вам необходимо установить ширину и высоту.

Пройдемся с примера:

.container { 
    width:700px 
} 
.block { 
    float:left; 
    width:100px; 
    height:100px; 
    box-sizing:border-box; 
    margin:0; 
} 

Теперь будет 7 блоков подряд, так как блоки 100px в ширину, и контейнер 700px в ширину. если вы хотите, чтобы они были 3 в ряд, вы можете добавить этот CSS:

.block:nth-child(4n+4) { 
    clear:left; 
} 

Или:

.column1 { 
    clear:left; 
} 

Answer 2

решение для обоих вопросов -

<h1>3x3 Grid</h1> 
<div class="container"> 
    <div class="block row1 column1">1</div> 
    <div class="block row1 column2">2</div> 
    <div class="block row1 column3">3</div> 
    <div class="block row2 column1">4</div> 
    <div class="block row2 column2">5</div> 
    <div class="block row2 column3">6</div> 
    <div class="block row3 column1">7</div> 
    <div class="block row3 column2">8</div> 
    <div class="block row3 column3">9</div> 
</div> 

<h1>Centered box with 100px x 100px</h1> 
<div class="container container2"> 
    <div class="block row1 column1">1</div> 
    <div class="block row1 column2">2</div> 
    <div class="block row1 column3">3</div> 
    <div class="block row2 column1">4</div> 
    <div class="block row2 column2">5</div> 
    <div class="block row2 column3">6</div> 
    <div class="block row3 column1">7</div> 
    <div class="block row3 column2">8</div> 
    <div class="block row3 column3">9</div> 
</div> 

.container *{ 
    box-sizing: border-box; 
} 
.container{ 
    width:700px; 
    box-sizing: border-box; 
} 

.container:after{ 
    display:block; 
    clear:both; 
    content:""; 
} 
.block { 
    float:left; 
    width:33.3%; 
    box-sizing:border-box; 
    margin:0; 
} 

.container2{ 
    text-align:center; 
} 
.container2 .block{ 
    float:none; 
    position:relative; 
    height:100px; 
    width:100px; 
    display: inline-block; 
} 

Я думаю, вы получили ответ для обоих ваших вопросов.