
Recently, I came across the following post on Twitter:

<TwitterTweetEmbed
  tweetId={'1108290606458175489'}
/>

It became known as the _Impossible Layout_ with many concluding that it couldn't be done with just CSS. Of course, I had to tackle it. In the end I came up with 2 solutions. One is a pure CSS solution, but it has a relatively minor caveat and the other requires a bit of JS, but no caveats.

## Solution 1 - Pure CSS

Looking at the layouts I saw there were three uniformly-sized images and an arbitrary amount of text. I also know that all the elements involved are siblings of each other and not three containers each with their distinct image and text, otherwise, the larger layout wouldn't be workable. And since the items are all siblings and I need to move things in 2 dimensions that I will be needing CSS Grid at some point.

Let's elaborate on that last point.

Going back to the small layout, everything is in a single column and intermixed. On the large layout, there are clearly two columns with the text on one side and images on the other. So that explains needing to manipulate the elements in one direction, horizontally. Also on the large layout, the text all sits snug together without large breaks between them where an image used to be so that means Ii'll need to move them vertically as well. And if you're working with two dimensions in CSS, then you're likely to be wanting CSS Grid to keep things tidy.

To begin, let’s create our grid container and move everything in it to the second column. And then move just the images over to the first column.

<iframe
  height="265"
  style={{ width: "100%" }}
  scrolling="no"
  title="Impossible Layout - CSS Grid only"
  src="//codepen.io/arkmuntasser/embed/eXboKv/?height=265&theme-id=dark&default-tab=html,result"
  frameBorder="no"
  allowtransparency="true"
  allowFullScreen={true}
>
  See the Pen{" "}
  <a href="https://codepen.io/arkmuntasser/pen/eXboKv/">
    Impossible Layout - CSS Grid only
  </a>{" "}
  by Amir R Muntasser (
  <a href="https://codepen.io/arkmuntasser">@arkmuntasser</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

Now we're getting somewhere! This is starting to look like the large layout we want, but there are rows between the images when they should be immediately under each other and the height of the images are causing the rows to be too tall in some instances.

To fix this, we're going to set the `position: absolute` on the images. This will allow the text on the right to sit comfortably without the images effecting the row height. But with now the images are stacked on top of one another.

<iframe
  height="265"
  style={{ width: "100%" }}
  scrolling="no"
  title="Impossible Layout - CSS Grid + Absolute Positioning"
  src="//codepen.io/arkmuntasser/embed/MxZRZJ/?height=265&theme-id=dark&default-tab=html,result"
  frameBorder="no"
  allowtransparency="true"
  allowFullScreen={true}
>
  See the Pen{" "}
  <a href="https://codepen.io/arkmuntasser/pen/MxZRZJ/">
    Impossible Layout - CSS Grid + Absolute Positioning
  </a>{" "}
  by Amir R Muntasser (
  <a href="https://codepen.io/arkmuntasser">@arkmuntasser</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

This is where the caveat comes in with this method. Because I am assuming the images are uniform in size, I can translate the images reproduce the desired layout. For this, I am also going to assume that you as the developer or the CMS have some way of knowing how many images there are and which number each image is. Why? So we can set an inline CSS variable (CSS Custom Property) on the images. This will let us write a very simple rule in our CSS to enable support for an arbitrary number of images.

<iframe
  height="265"
  style={{ width: "100%" }}
  scrolling="no"
  title="Impossible Layout - CSS Grid only"
  src="//codepen.io/arkmuntasser/embed/YgdMgd/?height=265&theme-id=dark&default-tab=html,result"
  frameBorder="no"
  allowtransparency="true"
  allowFullScreen={true}
>
  See the Pen{" "}
  <a href="https://codepen.io/arkmuntasser/pen/YgdMgd/">
    Impossible Layout - CSS Grid only
  </a>{" "}
  by Amir R Muntasser (
  <a href="https://codepen.io/arkmuntasser">@arkmuntasser</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

Finally, we can add a little extra CSS for some better styling and a media query go back to the small layout.

<iframe
  height="265"
  style={{ width: "100%" }}
  scrolling="no"
  title="Impossible Layout - Final"
  src="//codepen.io/arkmuntasser/embed/YgdbKg/?height=265&theme-id=dark&default-tab=html,result"
  frameBorder="no"
  allowtransparency="true"
  allowFullScreen={true}
>
  See the Pen{" "}
  <a href="https://codepen.io/arkmuntasser/pen/YgdbKg/">
    Impossible Layout - Final
  </a>{" "}
  by Amir R Muntasser (
  <a href="https://codepen.io/arkmuntasser">@arkmuntasser</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

And you're done!

![](https://cdn.glitch.com/2caac55b-1244-4a5a-9e9c-6389d180ccf7%2Ftenor.gif?1553317759077)

## Solution 2 - What about images of varying sizes?

Not quite.

What if you want to have images of different sizes? Or what if you can't know how many images there are or the index of each image? Then we're going to need a little JavaScript to help out.

What we need to do is find every image in the grid and as we loop over them keep a rolling sum of their heights and set a CSS variable on the images with the current height total. Then in our CSS we can simple translate the image by that amount.

<iframe
  height="265"
  style={{ width: "100%" }}
  scrolling="no"
  title="Impossible Layout - Solved!"
  src="//codepen.io/arkmuntasser/embed/PLXvWP/?height=265&theme-id=dark&default-tab=html,result"
  frameBorder="no"
  allowtransparency="true"
  allowFullScreen={true}
>
  See the Pen{" "}
  <a href="https://codepen.io/arkmuntasser/pen/PLXvWP/">
    Impossible Layout - Solved!
  </a>{" "}
  by Amir R Muntasser (
  <a href="https://codepen.io/arkmuntasser">@arkmuntasser</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

With this, you can have an indefinite number of images, an indefinite amount of text, and images of varying sizes. Not so impossible after all.


How I Solved the Impossible Layout


[Tailwind CSS](https://tailwindcss.com/) has been the talk of the web dev Twitter all this week with people getting heated on both sides with bad take after bad take with actual, legit criticism in the mix [getting shouted down because of the classic tech-bro double whammy of racism and sexism](https://dev.to/cher/sexism-racism-toxic-positivity-and-tailwindcss-cil). So I figure I might as well jump into the conversation a bit and talk about my thoughts on Tailwind because god knows we need another man coming in with his opinion. However, I do think I maybe have a slightly interesting point of view on the topic as I do use Tailwind, but totally not how they want me to because I fundamentally don't agree with the conceit of the framework. Let's dig in.

1. **Should you be using Tailwind?** Sure, why not. I'm always of the mindset of use the tools you like and make you productive. Our field changes so quickly that if you are going to survive you will eventually need to learn good ol' HTML, CSS, and JavaScript outside the context of a framework. If you don't agree, then I'm sorry you are so very, very wrong.

2. **Does Tailwind fix and/or replace CSS?** Absolutely not. So why are people over the moon for it? It does 3 things very well: compiles down to a very small bundle, reduces issues with specificity and scope, forces people to use a design system. Where does it fall short? It can be very tough to read, it creates a pseudo second syntax for CSS, it hides the power of the cascade, and it feeds, unintentionally (likely... hopefully...), into the growing perception that CSS is fundamentally broken or bad that a lot of devs, usually young inexperienced devs, have been promoting which usually stems from the popular mix of incompetence, arrogance, and sexism.

3. **Are frameworks bad?** Of course not! Frameworks area great tools and certainly have their place. Need to spin up a concept quickly? Just starting and don't know how to make pretty things yet? Need a quick template to get a project off the ground? Go get that framework! They are incredible tools that can help bridge knowledge gaps and product gaps. In fact, I primarily learned CSS via reading through how Bootstrap was put together back in the day.

So now that all the caveats are out of the way, let's get down to business on how I use Tailwind. To start, I don't use the actually framework at all. As presented, Tailwind just doesn't jive with how I think about CSS; I can't deal with the cryptic looking utility classes cluttering up my HTML and I understand and use the cascade a lot. But I love how Tailwind forces you into a design system.

When I say design system, I mean a system of [spacings](https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale), [font sizes](https://tailwindcss.com/docs/font-size), [color palettes](https://tailwindcss.com/docs/customizing-colors), etc. Instead of having these as utility classes, I map them to CSS variables. [Here's an example of my early work playing around with Tailwind inspired CSS variables](https://sv-design-system.glitch.me/).

I've found this approach to suit my needs nicely and have even expanded on it when it comes to colors:

<Code language="css">
{`--primary-color-hue: 210;
--primary-color-100: hsl(var(--primary-color-hue), 100%, 96%);
--primary-color-200: hsl(var(--primary-color-hue), 81%, 86%);
--primary-color-300: hsl(var(--primary-color-hue), 82%, 76%);
--primary-color-400: hsl(var(--primary-color-hue), 79%, 66%);
--primary-color-500: hsl(var(--primary-color-hue), 73%, 57%);
--primary-color-600: hsl(var(--primary-color-hue), 62%, 50%);
--primary-color-700: hsl(var(--primary-color-hue), 61%, 43%);
--primary-color-800: hsl(var(--primary-color-hue), 49%, 34%);
--primary-color-900: hsl(var(--primary-color-hue), 47%, 22%);`}
</Code>

Here I have a gradient of pinks all being generated off a defined hue. This means that I can simply change the hue and get a dramatically different gradient of colors. It also means that I can, if needed, leverage the hue outside of the standard primary color variables in other contexts. Another benefit is that I can quickly create a dark theme or any other kind of theme by simply redefining these low-level variables.

Now, this isn't as ideal as it could be due to HSL being kind of a mess, but once [LCH is broadly available this approach will become even more ideal](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/).

Now I have a model for building out a design system that lets me write CSS the way I want to write CSS, leverages the cascade, enables easy themes. And, I have to say, it's been an absolute joy to use. I liked it so much that we've adopted this practice at my work for my teams core product and it's been game changing for us.

Is this something you should do? I don't know. It works for me and the work I do for the type of product I develop. You'll have your own needs and should evaluate what is going to work best for you. And, really, that's the only thing that matters; what works best for you for your specific situation. Maybe it's something you roll yourself. Maybe it's a framework. Maybe, like for me, it's something in the middle. Good ideas exist everywhere and we can always learn something from someone elses work.


How I Use Tailwind CSS


A common misconception I see is that responsive web development means loading up your CSS files with media queries for everything. Don't get me wrong, media queries are important and you should definitely use them, but they aren't always necessary.

Let's talk about building responsive layouts without media queries.

- [View Demo App](https://inglorious-paper.glitch.me/)
- [Download Source Code on GitHub](https://github.com/arkmuntasser/responsive-layouts-without-media-queries)

**Prerequisites**

- Working knowledge of [HTML and CSS](https://internetingishard.com/html-and-css/)
- Familiarity with [Responsive Web Development](https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/)

## The Big Idea

In this article, we're going to discuss three ways to build a responsive layout: multi-column, flexbox, and CSS Grid. This article in now way is trying to be a definitive resources on these concepts, but rather to demonstrate cool aspects of each approach.

### Multi-column

Multi-column is perfect for when you want to get a newspaper like effect where the content builds downward and at some point breaks into a new column.

<Code language="html" title="index.html">
{`<ul class="multicolumn">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
</ul>`}
</Code>

<Code language="css" title="style.css">
{`.multicolumn {
  column-width: 280px;
  column-gap: 20px;
}`}
</Code>

[See Multi-Column Example](https://inglorious-paper.glitch.me/#multi-column)

With the above HTML we can see the items counting downward and eventually breaking into a new column.

The reason this works is because in the CSS I've set a width of `280px` for the columns. You should think of this as a minimum width and not a strict setting. In fact, the width will grow beyond 280 until there is enough room for another column at 280 to exist. With the CSS as written, assuming there's enough content, there will be as many columns as the container can handle. You can set set specific column counts if you prefer, but when I do that I often have to acompany it with a media query, which is what I'm trying to intentionally avoid here.

Whenever you need to make that newspaper-style layout there's no better tool than to use multi-column. But it's also great for [displaying sitemaps](https://www.simpleviewinc.com/sitemap/) if that's a thing you need to do.

### Flexbox

Flexbox can work in either a row or column context. For this article, I'm going to be focusing on row which is the default setting for flex items. Flexbox also doesn't wrap by deafult, but for this article, assume that I have set the flex container to wrap it's items.

Where multi-column wraps vertically like a newspaper, flexbox wraps horizontally like text does.

<Code language="css" title="style.css">
{`.flexbox {
  display: flex;
  flex-wrap: wrap;
}\n
.flexbox > * {
  flex: 1 1 280px;
}`}
</Code>

[See Flexbox Example](https://inglorious-paper.glitch.me/#flexbox)

Looking at the above example, you can see the items count from left to right and drop down to a new line when there's no more room.

Notice the last line of my CSS.

<Code language="css" title="style.css">
{`.flexbox > * {
  flex: 1 1 280px;
}`}
</Code>

This is shorthand notation for the following properties: `flex-grow`, `flex-shrink`, and `flex-basis`. The `flex-grow` and `flex-shrink` properties tell the columns how to, well, grow or shrink in relation to each other. With them set to `1` I'm telling them to grow and shrink at the same rate in the same proportion as each other; simply put, it's what keeps all the flex items the same size.

The `flex-basis` is kind of like a minimum width for each flex item. This is what gets considered when a flex-item does or doesn't drop to a new line.

Flexbox is ideal for situations where you have a list of items, but you don't particularly care how tall the items are. As such I like to use it for navigations like breadcrumbs, a list of tags on a blog post, or even simple 2-columns layouts.

### CSS Grid

CSS Grid is [wickedly powerful](/write-better-code-with-css-grid) and can enable a plethora of complex layouts.

<Code language="html" title="index.html">
{`<ul class="grid fill">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>\n
<ul class="grid fit">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>`}
</Code>

<Code language="css" title="style.css">
{`.grid {
  display: grid;
}\n
.grid.fill {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}\n
.grid.fit {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}`}
</Code>

[See CSS Grid Examples](https://inglorious-paper.glitch.me/#grid)

With Grid, you can do a similar layout to what I made with Flexbox above, but you can be a lot more explicit about how you want it to behave.

In the example above, we're repeating a simple pattern using `minmax()`. The `minmax()` function does what it sounds like, it provides a size that have a minimax size and a maximum size. In this case, my minimum is `120px` and my maximum is `1fr` which tell Grid to make it as large as it can with the room provided.

The only difference between the two Grid examples is one is using `auto-full` and the other is using `auto-fit`.

Using `auto-fill`, the Grid will err on the side of using the minimum value for each column and it will drop items to a new row when there's no more room for another column. Looking at the example, you'll also notice that it doesn't use up all the available hortizontal space.

On the other hand, `auto-fit` instead errs on the side of using the maximum value. It will grow each item to fill all the available horizontal space and dynamically shrink the columns as new items are added until the columns hit the minimum size and then it drops to a new row.

If you are building a layout or creating a design of any complexity, CSS Grid is probably the tool you'll want to reach for. It's incredibly expressive so you can get exactly the effect you desire.

## Conclusion

That's 3 ways to do responsive layouts without using a media query. There are other way certainly and I presented these 3 options as distinct from each other, but in reality you can mix and match these into each other as you need. It's very common to have a grid-item also be a flex-container.

Media queries are merely another tool in our tool belt for building responsive layouts. Use the right tool for the job, but most importantly, build incredibl layouts.

Check out the people I learned from for more information:

- [Jen Simmons](https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag)
- [Rachel Andrew](https://gridbyexample.com/)
- [Wes Bos](https://www.youtube.com/playlist?list=PLu8EoSxDXHP5CIFvt9-ze3IngcdAc2xKG)


How to Build Responsive Layouts without Media Queries


Sometimes you just need a element to shrink or grow in height proportionally with the width. Some tags will naturally do this like the `img` tag or `video` tag, but sometimes you need this functionality on something like a `div`. For example, you might be lazy loading an image, but want to reserve the space of the image so content doesn't jump when the image loads in.

We can do this using a handy trick of padding. If you give an element a top or bottom padding with a percent value that percent will be in relation to width of the elements parent. Let's take a look at an example to get a better idea of what that means.

Consider the following:

<Code language="html">
{`<style>
  .parent {
    width: 400px;
  }\n
  .child {
    padding-bottom: 50%;
    height: 0;
    background-color: tomato;
  }
</style>\n
<div class="parent">
  <div class="child"></div>
</div>`}
</Code>

Here we have an element called `.parent` with a width of 400px and an element called `.child` with a bottom padding of 50%. When this renders the browser will resolve the bottom padding to 200px because that's what 50% of 400px (the width of the parent element) is. This results in the child element having an aspect ratio of 2:1. But you may be wondering why I set the height to 0 on the child element.

By default, a `div` will have a height to fit its contents; I want to make sure the height of the element is being only determined by my bottom padding and the quickest way to do that is to set the height to 0.

Now that we've made a box with an aspect ratio, let's do something more practical like reserving space for a lazy-loading image.

<Code language="html">
{`<style>
  .post {
    width: 400px;
  }\n
  .post .img-wrapper {
    position: relative;
    padding-bottom: calc(600 / 800 * 100%);
    height: 0;
  }\n
  .post .img-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>\n
<article class="post">
  <div class="img-wrapper">
    <img data-src="/path/to/image.jpg" alt="..." />
  </div>
  <h3>Hello, World!</h3>
  <p>Check out my super cool internet website for online enjoyment...</p>
</article>`}
</Code>

Here we have an bit of content with an image, title, and some body content. In this scenario, my image that I'm using has dimensions 800x600 and I'm using those dimensions to define bottom padding percentage of the `.img-wrapper`.

<Code language="css">
{`.post .img-wrapper {
  padding-bottom: calc(600 / 800 * 100%);
}`}
</Code>

In this case, I could have just set the bottom padding to 75%, but I find using the dimensions of the image in a `calc()` makes things very clear and readily update-able if my image aspect ratio ever needs to change. You'll also notice that we're absolutely positioning the `img` element; we have to do this because the `.img-wrapper` is being entirely filled with padding leaving no room for the `img` to sit in naturally. Absolutely positioning the `img` lets us place it in the top-left corner of the `.img-wrapper` and stretch it fill the available width and height.

All that is left to do is to lazy load in the image when it comes into the viewport. To do that, we can use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) which will be a topic for a future post.


How to Give an HTML Element an Aspect Ratio


One of the most annoying things on the web is when a dropdown opens on hover and you move the most diagonally into the dropdown, but in doing so the dropdown disappears because I stopped hovering over the zone that triggers the dropdown to appear. There's a couple ways to go about this including this [awesome SVG-based solution from Hakim El Hattab](https://team.slides.com/hakimel/cssday-2019#/).

My go to method, however, is to use a little bit of animation.

- [View Demo App](https://better-dropdown.glitch.me/)
- [Download Source Code on GitHub](https://github.com/arkmuntasser/better-dropdown)

What I particularly like about this method is that it doesn't require any JavaScript to implement. All you need is the right markup and a bit of CSS.

## Prerequisites

- Working knowledge of [HTML and CSS](https://internetingishard.com/html-and-css/)
- Basic knowledge of [CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)

## The Big Idea

Conceptually, we're not doing anything too dissimilar than what Hakim is doing with his solution. What we're after is an extended hoverable area going from our trigger point to our menu. To do this, we create have an invisible dropdown helper element that is the width of the dropdown and the height of the trigger area and we place it over trigger area.

In the demo app, if you hover over the the word "dropdown" you'll see a red rectangle appear: this is our dropdown helper. As you move off the word "dropdown" you'll notice the red area starts shrinking downward toward the menu.

What this results in is a time limit in which you can move diagonally from the trigger point to the dropdown. As you move horizontally, the valid hoverable area shrinks vertically, this gives us our triangular area to move in. And because the easing isn't linear, we actually get a nice curve like in Hakim's solution that is a lot more natural to work in.

So that's the idea, but what does the code actually look like?

## The Code

Here is what the markup looks like for this dropdown.

<Code language="html">
{`<div class="nav-section">
  <div class="nav-section-title">Dropdown</div>
  <div class="dropdown-helper"></div>
  <div class="nav-section-dropdown">
    <a href="#" title="link">Link</a>
    <a href="#" title="link">Link</a>
    <a href="#" title="link">Link</a>
    <a href="#" title="link">Link</a>
    <a href="#" title="link">Link</a>
    <a href="#" title="link">Link</a>
    <a href="#" title="link">Link</a>
    <a href="#" title="link">Link</a>
    <a href="#" title="link">Link</a>
  </div>
</div>`}
</Code>

And here's the CSS that handles the making the dropdown visible on hover.

<Code language="css">
{`.header .nav-section-dropdown {
  display: none;
}\n
.header .nav-section:hover .nav-section-dropdown {
  display: grid;
}`}
</Code>

By default, the dropdown is not shown and when we hover over anything in the `.nav-section` we show the dropdown. That's the setup, let's take a look at the animation.

First, we define the initial state of the dropdown helper and how it's animation is going to work.

<Code language="css">
{`.header .dropdown-helper {
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 300ms ease 200ms;
}`}
</Code>

By default, we want to this to essentially not exist but we want it readily animatable. To do this, we set the Y scale to 0.

We also want this to animate downward so we need to set the transform origin accordingly.

And last, we set the transition we want. I find having a slight delay of about 200ms gives a much better feel to the whole effect, but you might find you need or want to adjust these numbers for your needs and taste.

Next, we need to make the helper full scale on hover.

<Code language="css">
{`.header .nav-section-title:hover + .dropdown-helper {
  transform: scaleY(1);
  transition: none;
}`}
</Code>

There are 2 things to note here:

1. The hover is **not** on the `.nav-section` itself, but instead on the `.nav-section-title`. We're also using the immediate sibling selector to target the helper. This is because the dropdown is closed, the title is essentially the entire valid trigger area and it's also what the user will be hovering off of to get into the dropdown.

2. The transition is set to `none` when the title is hovered. We don't want the helper to animate in, because if the user is moving quickly, they may trigger the animate out animation before the helper has fully animated in which would likely break the effect. So we remove the transition and have the helper instantly blink to full size.

Now when we move away from the title, the animation will begin and the user can move diagonally into the dropdown.

Finally, there's one last thing to take care of.

<Code language="css">
{`.header .nav-section-title {
  position: relative;
  z-index: 2;
}`}
</Code>

We want to make sure that the title sits above the helper so we don't accidentally cause the helper to animate out early.

Altogether, we get this:

<Code language="css">
{`.header .dropdown-helper {
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 300ms ease 200ms;
}\n
.header .nav-section-title:hover + .dropdown-helper {
  transform: scaleY(1);
  transition: none;
}\n
.header .nav-section-title {
  position: relative;
  z-index: 2;
}`}
</Code>

It's a little extra CSS, but the effect goes a long way toward providing a better user experience. And I'm personally happy when I can get a win like this without needing to add more JavaScript to a site.

That said, do also check out Hakim's method. There are many ways to tackle a problem and just as many contexts in which a particular solution is best. The only truly wrong way to go about it, is to not try to provide an optimal experience for your users.


Category:
CSS

How I Solved the Impossible Layout

How I Use Tailwind CSS

How to Build Responsive Layouts without Media Queries

How to Give an HTML Element an Aspect Ratio

How to Improve Dropdown Navigation with Animation

Category:CSS

Category:
CSS