Article 1 - 49%
2 column layout. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur.
RWD according to 12 column grid - 2% gap
2 Column Layout - class="grid column2"
Article 2 - 49%
2 column layout. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur.
3 Column Layout - class="grid column3"
Article 1 - 32%
3 column layout. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur.
Article 2 - 32%
3 column layout. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur. So dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam.
Article 3 - 32%
3 column layout. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur.
4 Column Layout - class="grid column4"
Article 1 - 23.5%
4 column layout. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur.
Article 2 - 23.5%
4 column layout. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur. column layout. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur.
Article 3 - 23.5%
4 column layout. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur.
Article 4 - 23.5%
4 column layout. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur.
Aside to the Left - class="grid asideLeft"
Article 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur.
Article 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur.
Article 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur.
Aside to the Right - class="grid asideRight"
Article 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur.
Article 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur.
Article 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur.
2 Sides - class="grid doubleSides"
Article 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur.
Article 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur.
Article 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid voluptatibus ipsam, omnis fuga. Eius obcaecati cumque repellat, quibusdam iste id neque nesciunt tenetur.
Want to have a custom layout , specify class .grid for the container and apply your desired output at Media queries. Examples:
@media screen and (min-width:480px) {
sectionA{
grid-template-columns: 2fr 1fr;
}
sectionB {
grid-template-columns: 1fr 3fr 1fr;
}
sectionC {
grid-template-columns: repeat(4, 23.5%);
}
}
Learn More about CSS Grid Layouts. at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout.