Introduction A better way Beyond centering Everything is a list 6 examples Thinking "inside the box" Installation

Everything is a list

Let's pause for a moment. If the entire layout can be created using just rows and columns, what do we do about smaller areas/elements?

You guessed it: more rows and columns!

Let's zoom in on these areas:


Once again there are thousands of ways we could go about creating these. But if you think about it, everything is a list:

Josephine
Watch
Events
<div class="column-left gap-2"> <div class="row gap-1"> <div class="w-6 h-6 rounded-full bg-gray-300" /> Josephine </div> <div class="row gap-1"> <div class="w-6 h-6 bg-gray-300" /> Watch </div> <div class="row gap-1"> <div class="w-6 h-6 bg-gray-300" /> Events </div> </div>
Josephine
<div class="row-left gap-1"> <div class="w-6 h-6 rounded-full bg-gray-300" /> Josephine <div class="w-6 h-6 rounded-full bg-gray-300" /> <div class="w-6 h-6 rounded-full bg-gray-300" /> <div class="w-6 h-6 rounded-full bg-gray-300" /> <div class="w-6 h-6 rounded-full bg-gray-300" /> </div>

And if you are using a component framework, such as React, we can do even better on a surface level:

<Column left gap={2}> <Row gap={1}> <Circle /> Josephine </Row> <Row gap={1}> <Square /> Watch </Row> <Row gap={1}> <Square /> Events </Row> </Column>
React JSX
<Row left gap={2}> <Row left gap={1}> <Circle /> Josephine </Row> <Row left gap={1}> <Circle /> <Circle /> <Circle /> <Circle /> </Row> </Row>
React JSX
I added another set of rows for the gap between the name and the right side buttons.

If that's not considered clean code, I don't know what is.
Next page 6 examples