CSS Grid can be used to stack elements (#tilPost)

I came across the article How to Stack Elements in CSS written by Sarah Dresner and learned that one could use display: grid; to stack element without setting any absolute positioning! ?
The trick is that you can define overlapping …


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

I came across the article How to Stack Elements in CSS written by Sarah Dresner and learned that one could use display: grid; to stack element without setting any absolute positioning! ?

The trick is that you can define overlapping grid-area declarations.

Let's say we have the following HTML:

<div class="photoCard">
  <img src="https://.../cutedog.jpg" alt="A cute dog">
  <div class="red">red</div>
  <div class="blue">blue</div>
</div>

Then you place the elements using CSS Grid as follows:

.photoCard {
  display: grid;
}

img { grid-area: 1 / 1 / 4 / 2; }
.red { grid-area: 1 / 1 / 2 / 2; }
.blue { grid-area: 3 / 1 / 4 / 2; }

The CSS above makes the img element span over three rows. Contrary, the .blue and .red element are placed on the first and third row leading them to be stacked on top of the image.

To visualize it, I made a quick #devsheet about it. ?


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2023-02-04T21:57:03+00:00) » CSS Grid can be used to stack elements (#tilPost). Retrieved from https://www.scien.cx/2020/01/26/css-grid-can-be-used-to-stack-elements-tilpost/.
MLA
" » CSS Grid can be used to stack elements (#tilPost)." Stefan Judis | Sciencx - Sunday January 26, 2020, https://www.scien.cx/2020/01/26/css-grid-can-be-used-to-stack-elements-tilpost/
HARVARD
Stefan Judis | Sciencx Sunday January 26, 2020 » CSS Grid can be used to stack elements (#tilPost)., viewed 2023-02-04T21:57:03+00:00,<https://www.scien.cx/2020/01/26/css-grid-can-be-used-to-stack-elements-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » CSS Grid can be used to stack elements (#tilPost). [Internet]. [Accessed 2023-02-04T21:57:03+00:00]. Available from: https://www.scien.cx/2020/01/26/css-grid-can-be-used-to-stack-elements-tilpost/
CHICAGO
" » CSS Grid can be used to stack elements (#tilPost)." Stefan Judis | Sciencx - Accessed 2023-02-04T21:57:03+00:00. https://www.scien.cx/2020/01/26/css-grid-can-be-used-to-stack-elements-tilpost/
IEEE
" » CSS Grid can be used to stack elements (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2020/01/26/css-grid-can-be-used-to-stack-elements-tilpost/. [Accessed: 2023-02-04T21:57:03+00:00]
rf:citation
» CSS Grid can be used to stack elements (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2020/01/26/css-grid-can-be-used-to-stack-elements-tilpost/ | 2023-02-04T21:57:03+00:00
https://github.com/addpipe/simple-recorderjs-demo