css fluid-fixed column layout

css:

<style>
.grid {
    display: -webkit-flex;
    display: flex;
}
.col {
    background: #ddd;
    padding: 30px;
}
.fluid {
    flex: 1;
}
.fixed {
    background: #ffa;
    width: 400px;
}
</style>

html:

<div class="grid">
    <div class="col fluid-25">
        <h2>Fluid column - 25%</h2>
 
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
    </div>
    <div class="col fluid-50">
        <h2>Fluid column - 50%</h2>
 
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
    </div>
    <div class="col fluid-25">
        <h2>Fluid column - 25%</h2>
 
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
    </div>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *