174 replies

[SOLVED] Can't figure out how to do this layout with css grids and `aspect-square`...

Im trying to make a card with the following layout. the main requirement is that the red box should be a square, with an icon/logo inside. this will be a 2x2 grid.
the red square should have the same height/width as the blue cell's height, so if the blue cell gets bigger, the red square will size accordingly
the pink cell is essentially blank, but will have the same height as the yellow.
the yellow cell height will change dynamically based on the content.
sorry if this is confusing, maybe this will clarify:

-RED width should match RED height (square)
-RED height should match BLUE height 
-BLUE height should match child content height (auto)
-BLUE width should be full width (auto) aka remainder of the space
-PINK height should match YELLOW height (auto)
-PINK width should match BLUE width 
-YELLOW height should match child content height (auto)
-YELLOW width should match BLUE width

-RED width should match RED height (square)
-RED height should match BLUE height 
-BLUE height should match child content height (auto)
-BLUE width should be full width (auto) aka remainder of the space
-PINK height should match YELLOW height (auto)
-PINK width should match BLUE width 
-YELLOW height should match child content height (auto)
-YELLOW width should match BLUE width

so far, im somewhat able to get it working, but am facing clipping/overlapping issues on smaller devices. AI told me it has something to do with

aspect-square

aspect-square

or something, but visually in my head, it should be fine. or should I just switch to using flexbox?

here is some code: https://pastebin.com/Ba8yc8Ma

Pastebin

```js <div className={cn( "grid grid-rows-2 border", "...

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

[SOLVED] Can't figure out how to do this layout with css grids and `aspect-square`...

-RED width should match RED height (square)
-RED height should match BLUE height 
-BLUE height should match child content height (auto)
-BLUE width should be full width (auto) aka remainder of the space
-PINK height should match YELLOW height (auto)
-PINK width should match BLUE width 
-YELLOW height should match child content height (auto)
-YELLOW width should match BLUE width

-RED width should match RED height (square)
-RED height should match BLUE height 
-BLUE height should match child content height (auto)
-BLUE width should be full width (auto) aka remainder of the space
-PINK height should match YELLOW height (auto)
-PINK width should match BLUE width 
-YELLOW height should match child content height (auto)
-YELLOW width should match BLUE width

so far, im somewhat able to get it working, but am facing clipping/overlapping issues on smaller devices. AI told me it has something to do with

aspect-square

aspect-square

or something, but visually in my head, it should be fine. or should I just switch to using flexbox?

here is some code: https://pastebin.com/Ba8yc8Ma

Pastebin

```js <div className={cn( "grid grid-rows-2 border", "...

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

[SOLVED] Can't figure out how to do this layout with css grids and `aspect-square`...

[SOLVED] Can't figure out how to do this layout with css grids and `aspect-square`...

Similar Threads

Similar Threads

Similar Threads