When you want elements that cover the full viewport, but text and other content still needs a contained width.
CSS Grid solves this problem with clean HTML and comes with a few bonus features.
One of the bonus features is that vertical centering is easily achieved using align-content: center
. If you want a more traditional flow with content starting at the top of the section, use align-content: start
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel lorem elementum, accumsan tellus ac, lobortis dui. Morbi finibus vitae metus sed consequat. Pellentesque vitae sodales lectus, id finibus mauris. Integer vel justo erat. Nulla sed nibh erat. Donec consectetur ac risus eu condimentum. Duis bibendum eget nunc at pretium. Donec vulputate iaculis augue, quis dictum eros placerat quis. Fusce lacinia dui sit amet magna cursus, sed consectetur nunc lobortis. Donec interdum dictum aliquam. Etiam euismod felis sit amet lacus commodo tempus. Donec ullamcorper semper quam at ultricies. In id augue ligula. Quisque cursus odio nec tincidunt dictum. Integer elit turpis, scelerisque vel velit sit amet, ultrices interdum est.
Another bonus feature is that we can easily sandwich in a full-width element by overriding the grid-column
.
Aenean et magna ut elit aliquet placerat id non dolor. Suspendisse congue sem ut congue sollicitudin. Ut elementum metus dui, eget lacinia metus tristique sit amet. Vestibulum suscipit mauris id ultricies tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras non ex sed felis aliquet consectetur vitae id quam. Cras vel mauris dapibus, cursus justo quis, aliquam libero. Quisque pulvinar erat a posuere fringilla. Fusce viverra malesuada euismod. Suspendisse lorem neque, luctus finibus placerat vel, auctor eu nulla. Aenean dignissim nisi ante, sed ultricies orci fringilla sit amet.
This works for images too! (Although they could get really large without some additional adjustments.)
Aenean vestibulum est ac commodo fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas ornare neque quis accumsan venenatis. Pellentesque ligula nisi, malesuada ac maximus sit amet, suscipit non ligula. Aliquam convallis tincidunt nulla. Praesent libero lorem, ullamcorper nec eros non, feugiat vulputate lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut cursus, enim ac eleifend posuere, tellus metus placerat erat, at condimentum arcu elit eget tellus. Vivamus sagittis sollicitudin cursus. Phasellus laoreet purus eget egestas maximus. Ut eget massa pulvinar, ultricies velit et, aliquam sapien.
Suspendisse dignissim eu odio aliquam consectetur. Donec ut sem eleifend, efficitur lorem non, laoreet libero. Suspendisse potenti. Nullam dapibus dignissim risus, eu sollicitudin dui mollis sed. Nunc faucibus, lacus ut rhoncus consectetur, risus ligula dapibus libero, in iaculis enim felis sit amet sapien. Etiam suscipit diam metus, quis pellentesque purus lobortis ac. Vivamus condimentum mattis dolor varius faucibus. Vivamus eget leo ac sapien rhoncus accumsan. Cras eu rhoncus turpis, vitae tincidunt odio. Etiam odio magna, ultrices in porta feugiat, rutrum sit amet diam.
Etiam ac lacus turpis. In hac habitasse platea dictumst. Duis rutrum felis vitae urna scelerisque, a feugiat diam vulputate. Cras leo leo, volutpat ut erat vitae, scelerisque viverra ligula. Duis ut egestas enim. Morbi lobortis eget purus in maximus. Vivamus eleifend porta ipsum, eu congue ligula condimentum nec. Donec volutpat metus tellus, at vehicula dui tristique ullamcorper. Pellentesque nisl leo, aliquet sed sem sit amet, efficitur porta risus. Nunc commodo pharetra quam vitae porta. Nam vel enim sit amet nisl euismod faucibus vitae nec tortor. Maecenas ut laoreet metus, a aliquam velit. Vivamus cursus condimentum leo a tincidunt. Integer nec ante augue. Phasellus sodales orci turpis. Quisque ac facilisis libero, at lacinia nulla.
Integer volutpat, enim vitae dignissim tristique, neque elit congue nisl, vitae ultrices est orci pulvinar orci. Suspendisse potenti. Suspendisse blandit nisl at elit efficitur, nec porttitor augue sollicitudin. Aliquam sed lectus magna. Ut est turpis, laoreet vitae malesuada in, posuere dapibus risus. In a nisi vel orci facilisis ultricies. In quis bibendum quam, et luctus turpis. Vestibulum ac eleifend mauris, a ultrices nulla. Ut auctor dolor eros, non venenatis tortor aliquet a. Proin eu ullamcorper augue. Maecenas vitae egestas erat. Vivamus efficitur nibh at magna condimentum, in luctus lorem semper. Nulla facilisi. Proin vitae semper nisl. Morbi sed libero in lacus vestibulum elementum et non justo.