CSS: create asymmetrical grids with generated content

CSS: create asymmetrical grids with generated content

How to create asymmetrical CSS grids with generated content.

Generated content can be actually used to mimic blocks without adding presentational markup to our pages. In that vein, CSS generated content can also be applied to create asymmetrical grids without calculating each time the dimensions of a block or a group of blocks that will be displayed in a different way with respect to the other elements of the grid. Let's see an example.

We have the following markup structure:

<div id="container">
    <div class="row">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="row spaced">
        <div class="box"></div>
    </div>
</div>
​

The first grid rows contains four elements, while the second one has only one element. We want this element to appear just under the third block of the first row, with an asymmetrical white space that surrounds it on both sides:

#container {
    width: 100%;
}

div.row {
    height: 8em;
    padding: 0 2%;
}

div.box {
    float: left;
    width: 23%;
    height: 100%;
    margin: 0 0 2% 2%;
    background: silver;
}

div.spaced:before {
    content: ' ';
    display: block;
    width: 46%;
    height: 100%;
    float: left;
    margin-left: 2%;
}

div.spaced:after {
    content: ' ';
    display: block;
    width: 23%;
    height: 100%;
    float: left;
    margin-left: 2%;
}

div.spaced div.box {
    margin-left: 4%;
}
​

Our generated content creates two fake boxes on the grid row, both left-floated. Each block features a different width so it can be used to create the desired amount of white space around the singular box of the second row.

You can see the demo below.

Demo

Live demo