Side-By-Side Layout
Creating Responsive Two Column Layouts
šØāš¼ With the small and subtle spacing and typography adjustments behind us, we're going to tackle the big layout change happening at the XL breakpoint.
šØ At the xl breakpoint, make the grid have 2 columns.
- The first column's width should be defined by the logo grid (š auto sizing)
- The second column should take up the remaining space (š fraction unit sizing).
š° You can use a
grid-cols-[] arbitrary value to achieve this!šØāš¼ Make sure the gap between the columns matches the Figma design.