Способы верстки сетки?

Всем привет. Прочитал на тему верстки уже не мало статей, в частности темы на этом сайте, но все равно есть вещи которые мне не понятно.
В качестве практики верстаю сайт портфолио для фотографа. Если с верхними блоками все более менее понятно. То с сеткой проблема. У меня получилось вот так:
Screenshot%20from%202015-02-01%2016%3A23

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

И в целом вся сетка становится не по центру. Как это решить?
Screenshot%20from%202015-02-01%2016%3A23

Вот код:
<html>
<head>
    <title>Photography portfolio</title>
      <meta charset="utf-8">
      <link rel="stylesheet" href="main.css">
      <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="header">
        <div class="nav-left"><p>Logotype</p></div>
        <div class="nav-right">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Logout</a></li>
            </ul>
        </div>
    </div>
    <div class="content"></div>
    <div class="sort"></div>
    <div class="grid">
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
    </div>
    

</body>
</html>

@import url(http://fonts.googleapis.com/css?family=Raleway);
        a{
            font-family: 'Raleway', sans-serif;
            text-decoration: none;
            color: #999;
        }
        p{
            font-family: 'Raleway', sans-serif;
            color: #999;
        }
        body{
            
            background-color: #FFFFFF;
            margin: 0 auto;
            
        }
        .header {
            width: 100%;
            height: 80px;
            background-color: #FFFFFF;
        }
        .content {
            width: 100%;
            height: 300px;
            background-color: #C5c5c5;
        }
        .sort {
            width: 100%;
            height: 50px;
            background-color: #FFFFFF;
        }
        .grid{
            max-width: 1100px;
            min-width: 600px;
            margin: 0 auto;
        }
        
       
        .column{
            background-color: #c5c5c5;
            width: 200px;
            height: 200px;
            float: left;
            margin: 10px;

        }

        .clearfix{
            clear: both;
        }
        .block{
            margin: 0 auto;
        }
        li{
            display: inline;
        }
        ul{
            padding-top: 12px;
        }
        ul a{
            padding: 5px;
        }
        .nav-left{
            width: 200px;
            height:200px;
            float: left;
            padding: 13px;
        }
        .nav-right{
            width: 400px;
            height:200px;
            float: left;
        }


Может вы предложите координально другой метод, буду только рад.

Вот нашел гениальную статью про вертку сетки как на Pinterest - w3bits.com/css-masonry
Попробовал - все шикарно работает, но единственный минус - блоки идут сверху вниз. Может как то меняется это?

И вообще замечаю за собой, что часто сомневаюсь в каком вариенте сверстать тот или ной объект, то есть я знаю как, но какой лучше вариант выбрать затрудняюсь. Посоветуйте какую-нибудь занятную литературу на этот счет, интересно было бы почитать.

Спасибо заранее каждому!
  • Вопрос задан
  • 3191 просмотр
Пригласить эксперта
Ответы на вопрос 2
@BelkinVadim
Frontend разработчик
Посмотрите реализацию сетки в популярных фреймворках. Bootstrap, semantic UI, uikit, foundation и т.д. Везде за счет ширина в процентах и padding сетка делается.
Ответ написан
Комментировать
@kiberlain
Как вариант для блоков задать display: inline-block, а для родительского дива text-align: center.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы