Fixed width, fluid, fill, and baseless columns can be mixed.
See the grid in action by resizing your browser.
All columns are matched heights by default.
Shorter Column
This column has shorter text.
Longer Column
This column has longer text.
The shorter column grows in height to match the longer column.
The shorter column grows in height to match the longer column.
The shorter column grows in height to match the longer column.
Columns can be set to fill the remaining space.
This can produce Irrational Ratios.
Set fixed heights for complex layouts.
Try resizing your browser.
Easily control scrollable areas.
Try resizing your browser.
Header
Scrollable Area
Lorem ipsum dolor sit amet, tantas ancillae consequat ex ius, sea ex ponderum signiferumque. Graeci graeco splendide est ea. Usu cu graeco lucilius consequuntur, no purto iuvaret pro. Has at agam tantas definitionem, est te tantas salutatus. Sea brute meliore verterem ea, tota omnium contentiones at usu. Salutatus adolescens eu sed, solum viderer ceteros in qui.
Mel no diceret invenire, et mea natum alienum percipit, mea nominavi principes aliquando ne. Purto dicat pericula id sit, fugit iudico causae eu nec. Amet reque rationibus eum eu, mea solum nostro contentiones an. At vidit persius definiebas vel, eu affert quaerendum qui.
Eum altera qualisque adversarium ne. Te pro saepe sadipscing voluptatibus, et nam euismod sanctus qualisque. Putant voluptaria est ei, no mei legere sententiae, an maluisset reformidans his. Pri deleniti tractatos et, reque everti cu duo. Id nec constituam sadipscing, ea ridens bonorum vis. Nec civibus antiopam id, vel id putant convenire. Falli incorrupte duo ei, ne usu sint quodsi qualisque, ex cum quod numquam cotidieque.
Footer
Header
Horizontal Scrollable Area
With vertically scrolling cards
Eum altera qualisque adversarium ne. Te pro saepe sadipscing voluptatibus, et nam euismod sanctus qualisque. Putant voluptaria est ei, no mei legere sententiae, an maluisset reformidans his. Pri deleniti tractatos et, reque everti cu duo. Id nec constituam sadipscing, ea ridens bonorum vis. Nec civibus antiopam id, vel id putant convenire. Falli incorrupte duo ei, ne usu sint quodsi qualisque, ex cum quod numquam cotidieque.
Lorem ipsum dolor sit amet, tantas ancillae consequat ex ius, sea ex ponderum signiferumque. Graeci graeco splendide est ea. Usu cu graeco lucilius consequuntur, no purto iuvaret pro. Has at agam tantas definitionem, est te tantas salutatus. Sea brute meliore verterem ea, tota omnium contentiones at usu. Salutatus adolescens eu sed, solum viderer ceteros in qui.
Mel no diceret invenire, et mea natum alienum percipit, mea nominavi principes aliquando ne. Purto dicat pericula id sit, fugit iudico causae eu nec. Amet reque rationibus eum eu, mea solum nostro contentiones an. At vidit persius definiebas vel, eu affert quaerendum qui.
Eum altera qualisque adversarium ne. Te pro saepe sadipscing voluptatibus, et nam euismod sanctus qualisque. Putant voluptaria est ei, no mei legere sententiae, an maluisset reformidans his. Pri deleniti tractatos et, reque everti cu duo. Id nec constituam sadipscing, ea ridens bonorum vis. Nec civibus antiopam id, vel id putant convenire. Falli incorrupte duo ei, ne usu sint quodsi qualisque, ex cum quod numquam cotidieque.
Footer
Use vertical centering in elements with a height.
Media Body
Eum altera qualisque adversarium ne. Te pro saepe sadipscing voluptatibus, et nam euismod sanctus qualisque. Putant voluptaria est ei, no mei legere sententiae, an maluisset reformidans his.
Pri deleniti tractatos et, reque everti cu duo. Id nec constituam sadipscing, ea ridens bonorum vis. Nec civibus antiopam id, vel id putant convenire. Falli incorrupte duo ei, ne usu sint quodsi qualisque, ex cum quod numquam cotidieque.
Use a single class to apply vertical centering.
Media objects can be created using the same conventions as the grid. No extra classes necessary!