CSS Grid (and/or Flex) - Overlap Two Divs

[kongondo]

Here's one for you CSS ladies and gents. I am trying to improve my knowledge (and use!) of CSS Grid and Flex. I have pored over tutorials, both written and visual. However, I have hit a brick wall with something seemingly simple. I would like to overlap two divs as illustrated in the image below. There are two layouts, one slightly different than the other. I would like div two to overlap div one. In the good 'ol days maybe a negative margin and position absolute would have done the trick. I would like to achieve this using CSS Grid and if needed, CSS Flex. I don't care about IE.

Thanks for any code, pointers etc. 

 

Edited December 21, 2020 by kongondo

[Sergio]

Greetings!

Webflow has an super nice tutorial on implementing this using their app, BUT it's totally fine to just learn from it and to it by hand, so if you are more of a visual learner, like me, you'll enjoy it: 

 

[kongondo]

Thanks @Sergio!

[psy]

Kevin Powell has a good tutorial using grid columns and rows to overlap content.

 

[kongondo]

Thanks @psy. I saw his other older ones but I missed this one.

[kongondo]

Quick follow-up @psy, can I then use margins (top or bottom) as needed to further pull/push the overlapping element as required or that is a 'no no'? Thanks.

[horst]

You need to create enough rows and columns, and span your contents, I believe.

See Jen Simmons here:

 

[monchu]

8 hours ago, kongondo said:

Here's one for you CSS ladies and gents. I am trying to improve my knowledge (and use!) of CSS Grid and Flex. I have pored over tutorials, both written and visual. However, I have hit a brick wall with something seemingly simple. I would like to overlap two divs as illustrated in the image below. There are two layouts, one slightly different than the other. I would like div two to overlap div one. In the good 'ol days maybe a negative margin and position absolute would have done the trick. I would like to achieve this using CSS Grid and if needed, CSS Flex. I don't care about IE.

Very easy using css grid no need flex to do that.

Use z index bigger for div two and use grid-area to locate div one and div two.

[psy]

21 hours ago, kongondo said:

can I then use margins (top or bottom) as needed to further pull/push the overlapping element

You can use padding/margins to tweak but first define your rows and columns so that they overlap where required. In the example below I have a text block partially overlapping an image. On small screens, the text overlaps at the bottom and on larger screens, the text is on the left and overlaps the image on the right.

Spoiler

.hero__wrapper {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10,auto);

  .hero__img {
    grid-column: 1 / -1;
    grid-row: 1 / 9;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .hero__title {
    font-size: calc(var(--fs-text) * 1.5);
    margin-block-start: 1rem;
  }

  .hero__body {
    grid-column: 2 / -2;
    grid-row: 8 / -1;
    background: var(--clr-pale);
    padding: 1rem;

    h2 {
      font-size: calc(var(--fs-text) * 1.8);
      color: var(--clr-blue-10);
      text-transform: none;
      margin: var(--padding) 0;
    }

    .hero__buttons {
      margin-block-start: var(--padding);
      display: flex;
      flex-wrap: wrap;

      .button {
        margin: 0.5rem 0.5rem 0 0;
      }
    }
  }

  @media screen and (min-width: 1024px) {
    grid-template-columns: repeat(10, 1fr);
    min-height: 50vh;
    grid-template-rows: repeat(4, 1fr);


    .hero__img {
      grid-column: 6 / -1;
      grid-row: 1 / -1;
      object-fit: cover;
      width: 100%;

    }

    .hero__title {
      margin-block-start: 1rem;
    }

    .hero__body {
      grid-column: 1 / 7;
      grid-row: 2 / 4;
      background: var(--clr-pale);
      padding: 1rem;
      margin-inline-start: calc(10vw - 1rem);

      h2 {
        font-size: calc(var(--fs-text) * 3);
        @supports (font-size: clamp(3em, 4em, 5em)) {
          font-size: clamp(3em, 4em, 5em);
          line-height: 1.1;
        }

      }
    }
  }
}

 

 

[kongondo]

Thanks everyone.

I have also found some brilliant articles at Hongkiat including this one on moving items in a CSS grid.