Spanning Columns
The news box sits in one cell of the third row, and the cell next to it is empty. It would look much better across the whole width of the grid.
In the CSS course, you stretched a grid item over several columns with grid-column: span 2. In Tailwind, there are these classes:
| Class | CSS | The item is... |
|---|---|---|
col-span-2 | grid-column: span 2 / span 2; | two columns wide |
col-span-full | grid-column: 1 / -1; | as wide as all the columns |
row-span-2 | grid-row: span 2 / span 2; | two rows tall |
span 2 / span 2 means the same as span 2: Tailwind just writes it for both the start and the end of the item.
An item can also start or end at a particular grid line: col-start-2 is grid-column-start: 2, and col-end-4 is grid-column-end: 4. The lines are numbered from 1, as you know.
Instructions
Add the class col-span-2 to the news box (the orange div below the cards). It now spans both columns.
Start programming for free
7/11