If you see this, something is wrong
First published on Wednesday, Sep 10, 2025 and last modified on Sunday, Feb 22, 2026
Grids let you organize blocks of content in a page. To maintain readability, the blocks are given a minimum width. When the browser window is too narrow, the blocks “wrap” to the next line. Let us have a look at an example with some lorem text.
Resize the browser window to see what happens.
First block
Lorem ipsum ad, in sint, laboris qui, irure ad exercitation, ut, fugiat commodo, ut eiusmod enim. Sed adipiscing in laborum cillum aliquip, id commodo non quis nisi commodo in voluptate ad. Id dolor nulla veniam occaecat, occaecat eu mollit ea, est, et consectetur eiusmod, incididunt esse.
Lorem ipsum nisi magna dolore cillum aliquip aute laboris ex officia, quis deserunt reprehenderit magna quis. Dolore tempor enim magna, ullamco nulla nostrud non, veniam, do exercitation in irure elit ea. Enim exercitation anim et officia in dolore consectetur mollit nulla nulla ea deserunt ex commodo.
Second block
Lorem ipsum voluptate eu et, laborum irure incididunt deserunt sit ut labore. Culpa aliqua, sed, ut cillum mollit veniam est esse ea ea. Duis proident aute mollit magna, est officia nostrud commodo in incididunt.
Lorem ipsum anim aute dolore est aute reprehenderit tempor pariatur exercitation commodo quis. In laboris irure enim in nisi, anim amet sed, laborum, dolor consequat. Irure eu eu pariatur adipiscing, dolore exercitation, et, eiusmod, amet tempor dolor.
Third block
Lorem ipsum eu non fugiat ut labore aute, do irure ullamco laboris excepteur ut. Excepteur eiusmod ad dolore, quis ex deserunt officia velit ea, consectetur elit, aliquip. Occaecat deserunt quis exercitation mollit quis amet magna consectetur quis adipiscing dolore adipiscing.
Lorem ipsum dolore esse ut ea in sint tempor minim, occaecat, id eiusmod enim, incididunt dolor magna et. Eiusmod dolore officia non exercitation commodo, pariatur duis dolore in, magna cillum adipiscing mollit nostrud sed velit. Irure commodo magna, enim dolor est non minim aliquip anim dolore enim, incididunt commodo, reprehenderit, ullamco sed.
Here is the general syntax.
\begin{grid}[numberOfBoxes][verticalAlignment]
\begin{gridItem}
... content of first block ....
\end{gridItem}
\begin{gridItem}
... content of second block ....
\end{gridItem}
\end{grid}
The optional numberOfBoxes parameter specifies the number of boxes. The default is 2. In the previous example it was set to 3.
The optional verticalAlignment specifies the vertical alignment of the boxes. It can take the following values.
top
bottom
center
The default is center. In the previous example it was set to top.
Grid items can be styled with the style environment.
Here is a grid example with default settings. The first block consists in a jpg image, the second an mp4 video and the third block has composite content.
Dad and son
Space. The final frontier.
Lorem ipsum esse, laboris pariatur magna nostrud cillum, veniam, sed in occaecat enim ad dolore, amet ut. Mollit duis sint amet ea aliqua in cillum ea in ex do reprehenderit ea excepteur dolore.
Here the text color has been set to blue.