Responsive Grid Layout
This is the grid layout, with multiple containers held within a div that is set to use "grid", and is made responsive through the use of using the "sm", "lg", and "xl" prefixes so that at minimum the grid has once column, if the window is larger small or larger it shows with two columns, at large it shows 3 columns, and at extra large and up it shows 4 columns.
Responsive Grid Items
To go with the responsive grid, each item is set to be a square at a size that fits the screen based on the number of columns as it automatically fits the width of the column and used aspect-square to cause the height to be the same as the width. Because of this, in case the text exeeds the height of a Grid Item then it is set with overflow-y-auto so that it shows a scroll bar to see the remaining text but it doesn't include one if it isn't needed.
This will be demonstrated with a long instance of Lorem Ipsum in the next Grid Item.
Long Text Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim lectus in arcu tempus fringilla. Aliquam dignissim sapien nec arcu vehicula, vitae cursus nunc vestibulum. Nulla consequat magna convallis condimentum varius. Duis ac placerat mauris. Integer at magna quis tellus commodo dapibus. Ut ac efficitur sem, vitae sodales felis. Integer vel arcu nulla. Pellentesque dapibus iaculis vestibulum. Pellentesque ante ex, tincidunt non mattis nec, tincidunt vitae sapien. Praesent pretium egestas nibh, vitae iaculis velit.
Nullam aliquam sapien id mauris consequat semper. Nulla facilisi. In lacus risus, molestie nec erat at, iaculis interdum odio. Proin sodales accumsan rhoncus. Sed hendrerit aliquam nisl et eleifend. Integer ac tristique justo, sit amet convallis est. Maecenas viverra sagittis nulla nec commodo. Duis erat nibh, volutpat et elementum eu, egestas a felis.
Vestibulum id augue a enim tempor scelerisque. Suspendisse eu tincidunt leo. Nam et lorem sit amet lacus porta auctor at quis nunc. Proin aliquet vel erat eget varius. Ut id mollis tellus. Praesent ut ipsum odio. Ut iaculis tincidunt placerat.
Suspendisse pulvinar tellus a urna molestie commodo. Phasellus in blandit tortor. Proin viverra eros sem, ac ornare mauris convallis id. Praesent volutpat, nisl iaculis tincidunt scelerisque, libero nisi lobortis massa, porttitor bibendum sem est scelerisque nisl. Suspendisse iaculis eu tortor ac bibendum. Phasellus quis bibendum sem. Donec suscipit efficitur venenatis. In a placerat lorem. Mauris tempus, lacus quis fermentum tincidunt, sem nisl vehicula augue, id commodo tellus erat eu sem. Duis sodales sit amet velit ut pretium.
In consequat eleifend turpis sed faucibus. Nulla interdum dolor neque, at venenatis lectus tristique non. Quisque elementum nisl sit amet nunc tristique, ut sollicitudin lorem dapibus. Praesent magna odio, rutrum a ornare vel, tempor et metus. Integer facilisis mattis nisi id ullamcorper. Maecenas quis lacinia velit. Proin rhoncus lacus ante, quis pulvinar ligula mattis et. Vivamus congue diam massa, id mattis purus rhoncus vel. Fusce nisl ligula, ornare vel lectus eu, sodales condimentum tortor. Morbi volutpat sit amet libero finibus rutrum.
Images in Grid Items
The following four Grid Items each contain a randomly picked image (chosen by using this random picture picker) to show that they are automatically sized to fit within the Grid Items.
This also shows the use case of using a Grid layout for a gallery within a website.
picture 1
picture 2
picture 3
picture 4
