Kaynak: CSS-Tricks
When I talk about layouts, I'm referring to how you place items on a page. The CSS properties that are widely used here include: display — often grid or flex nowadays margin padding width height…
When I talk about layouts, I'm referring to how you place items on a page. The CSS properties that are widely used here include:
When we shift layouts into CSS, we lose the mental structure and it takes effort to re-establish them. Imagine the following three-column grid in HTML and CSS:
But grid-cols-3 and col-span-2 are kinda weird and foreign-looking because we're trying to parse Tailwind's method of writing CSS.
Now, watch what happens when we shift the syntax out of the way and use CSS variables to define the layout instead. The layout becomes crystal clear immediately:
But it makes the layout much easier to write, read, and visualize. It also has other benefits, but I'll let you explore its documentation instead of explaining it here.
.grid { display: grid; grid-template-columns: 2fr 1fr; } Unfortunately, it won't work. This is because fr is calculated based on the available space after subtracting away the grid's gutters (or gap).
Since 2fr 1fr only contains two columns, the output from 2fr 1fr will be different from a standard three-column grid.
Alright. Let's continue with the reasons that make Tailwind great for building layouts.
I think layouts are the hardest things to name. I rarely come up with better names than:
But these names don't do the layout justice. You can't really tell what's going on, even if you see .two-columns , because .two-columns can mean a variety of things:
You can already see me tripping up when I try to explain that last one there…
Instead of forcing ourselves to name the layout, we can let the numbers do the talking — then the whole structure becomes very clear.
A “two-column” layout might have different properties when used in different contexts. Here’s an example.
The difference in gap sizes is subtle, but used to show that the items are of separate groups.
If this sort of layout is only used in one place, we don't have to create a modifier class just to change the gap value. We can change it directly.
text-balance might work here, but this is often nicer with manual positioning.
Most likely, similar layouts should have the same responsive factor. In that case, it makes sense to group the layouts together into a named layout.
.two-column { @apply grid-simple; /* --cols: 1 is the default */ @media (width >= 800px) { --cols:2; } } However, you may have layouts where you want two-column grids on a mobile and a much larger column count on tablets and desktops. This layout style is commonly used in a site footer component.
Since the footer grid is unique, we can add Tailwind's responsive variants and change the layout on the fly.
This article is a sample lesson from my course, Unorthodox Tailwind , where I show you how to use Tailwind and CSS synergistically.
Personally, I think the best way to use Tailwind is not to litter your HTML with Tailwind utilities, but to create utilities that let you create layouts and styles easily.
I cover much more of that in the course if you're interested to find out more!
Bu içerik otomatik olarak derlenmektedir. Tüm haklar orijinal yayıncıya aittir.
