Description
Although for a long time there have been ways to create 2-column layouts for your site, none are more effective or efficient than CSS3 Grid Layout. Here, you can see how to use it to create 2 columns, with a gap between them!
Code
[[module css]]
.grid-1 {
display: grid;
grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);
column-gap: 1rem;
}
.grid-2 {
display: grid;
grid-template-columns: calc(33.333% - 0.5rem) calc(33.333% - 0.5rem) calc(33.333% - 0.5rem);
column-gap: 1rem;
}
.grid-1>div, .grid-2>div {
text-align: justify;
text-justify: inter-word;
}
[[/module]]
[[div class="grid-1"]]
[[div]]
Content for your first column!
[[/div]]
[[div]]
Content for your second column!
[[/div]]
[[/div]]
[[div class="grid-2"]]
[[div]]
Content for your first column!
[[/div]]
[[div]]
Content for your second column!
[[/div]]
[[div]]
Content for your third column!
[[/div]]
[[/div]]In action
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet volutpat consequat mauris nunc congue. Eget gravida cum sociis natoque penatibus et. At elementum eu facilisis sed. Pharetra vel turpis nunc eget lorem dolor. A pellentesque sit amet porttitor eget dolor morbi non arcu. Ipsum a arcu cursus vitae congue mauris rhoncus aenean vel. Non sodales neque sodales ut etiam sit amet. Fermentum dui faucibus in ornare quam viverra. Cursus in hac habitasse platea dictumst quisque.
Quam pellentesque nec nam aliquam sem et tortor. Mauris nunc congue nisi vitae suscipit tellus mauris. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Ullamcorper sit amet risus nullam eget. Auctor eu augue ut lectus arcu bibendum at varius vel. Turpis nunc eget lorem dolor sed viverra. Ullamcorper malesuada proin libero nunc consequat. Morbi tincidunt ornare massa eget egestas purus. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Sapien pellentesque habitant morbi tristique senectus et. Varius morbi enim nunc faucibus a pellentesque sit amet. Quisque sagittis purus sit amet volutpat consequat mauris nunc congue. Massa vitae tortor condimentum lacinia quis vel eros. Mi eget mauris pharetra et ultrices neque ornare aenean. A condimentum vitae sapien pellentesque habitant morbi tristique senectus. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt.
Egestas sed tempus urna et pharetra. Non curabitur gravida arcu ac tortor dignissim convallis aenean et. Eget nunc lobortis mattis aliquam faucibus purus in. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Proin sagittis nisl rhoncus mattis rhoncus. Vulputate odio ut enim blandit. Aliquam sem fringilla ut morbi tincidunt augue interdum velit. Urna molestie at elementum eu. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius. Volutpat est velit egestas dui id. At quis risus sed vulputate odio ut enim blandit. Eu tincidunt tortor aliquam nulla facilisi cras. Curabitur gravida arcu ac tortor dignissim convallis aenean et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet volutpat consequat mauris nunc congue. Eget gravida cum sociis natoque penatibus et. At elementum eu facilisis sed. Pharetra vel turpis nunc eget lorem dolor. A pellentesque sit amet porttitor eget dolor morbi non arcu. Ipsum a arcu cursus vitae congue mauris rhoncus aenean vel. Non sodales neque sodales ut etiam sit amet. Fermentum dui faucibus in ornare quam viverra. Cursus in hac habitasse platea dictumst quisque.
Quam pellentesque nec nam aliquam sem et tortor. Mauris nunc congue nisi vitae suscipit tellus mauris. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Ullamcorper sit amet risus nullam eget. Auctor eu augue ut lectus arcu bibendum at varius vel. Turpis nunc eget lorem dolor sed viverra. Ullamcorper malesuada proin libero nunc consequat. Morbi tincidunt ornare massa eget egestas purus. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Sapien pellentesque habitant morbi tristique senectus et. Varius morbi enim nunc faucibus a pellentesque sit amet. Quisque sagittis purus sit amet volutpat consequat mauris nunc congue. Massa vitae tortor condimentum lacinia quis vel eros. Mi eget mauris pharetra et ultrices neque ornare aenean. A condimentum vitae sapien pellentesque habitant morbi tristique senectus. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt.
Egestas sed tempus urna et pharetra. Non curabitur gravida arcu ac tortor dignissim convallis aenean et. Eget nunc lobortis mattis aliquam faucibus purus in. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Proin sagittis nisl rhoncus mattis rhoncus. Vulputate odio ut enim blandit. Aliquam sem fringilla ut morbi tincidunt augue interdum velit. Urna molestie at elementum eu. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius. Volutpat est velit egestas dui id. At quis risus sed vulputate odio ut enim blandit. Eu tincidunt tortor aliquam nulla facilisi cras. Curabitur gravida arcu ac tortor dignissim convallis aenean et.
Lectus mauris ultrices eros in cursus. Egestas fringilla phasellus faucibus scelerisque. Dui vivamus arcu felis bibendum. Lobortis feugiat vivamus at augue eget. Gravida neque convallis a cras semper auctor neque. Sit amet venenatis urna cursus eget nunc. Sed id semper risus in hendrerit gravida rutrum quisque non. Volutpat consequat mauris nunc congue. Scelerisque eu ultrices vitae auctor eu augue ut lectus. Tincidunt eget nullam non nisi est. In nisl nisi scelerisque eu ultrices vitae auctor eu augue. Etiam dignissim diam quis enim lobortis scelerisque fermentum. Urna duis convallis convallis tellus id. Amet consectetur adipiscing elit ut. Libero justo laoreet sit amet cursus sit amet dictum sit. Feugiat in fermentum posuere urna nec tincidunt praesent.
Eros donec ac odio tempor orci. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Eros donec ac odio tempor orci dapibus. Volutpat maecenas volutpat blandit aliquam etiam. Pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies. Nunc sed velit dignissim sodales. Ut ornare lectus sit amet est placerat in. Tortor aliquam nulla facilisi cras fermentum. Turpis tincidunt id aliquet risus feugiat. Id volutpat lacus laoreet non.
Thanks to tsangk for this great snippet: conditional-blocks
text above inserted with:
[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]
Other snippets posted by scutoid studios
new cornify - 02 Feb 2024 07:26
Rate this solution
If you think this solution is useful — rate it up!