CSS Grid specific layout

Question

I am trying to create this layout with display: grid, but I am not sure if it is even possible... I created two column layouts to have a B item horizontally aligned with an A item (green line). The A item is a child of a component that has one or two lines of text before.

I know that would be possible if I would have the text and A and B items in one container as siblings. But is there any other elegant solution that would be supported in all major browsers?

UPADTE: HTML Can be edited, but need to keep <section>s separated.

.card {
  border: 1px solid #E2E3E3;
  border-radius: 4px;
  background-color: #FFF;
  padding: .5rem;
}

.checkout-form {
  padding: 1.5rem;
  background-color: #f9f9f9;
  display: grid;
  grid-template-columns: minmax(0, 2fr)  minmax(0, 1fr);
  gap: 1rem;
}

<form class="checkout-form">
        <div class="checkout-form__main">
            <section>
                <section>
                    <p>Products info</p>
                    <article class="card">
                      Content A
                    </article>
                </section>
                <section>
                    <p>Customer info</p>
                    <article class="card">
                      Content X
                    </article>
                </section>
            </section>
        </div>
        <div class="checkout-form__cost">
            <section class="card">
               Price summary
            </section>
        </div>
    </form>

Could you show us your HTML structure, preferably as a runnable snippet, see stackoverflow.com/help/minimal-reproducible-example and tell us what your constraints are, eg can you alter the HTML? — A Haworth
– A Haworth, Commented Jan 3, 2023 at 17:44
You need to show a minimal reproducible example You aren't giving us any CSS at all. — Rob
– Rob, Commented Jan 3, 2023 at 18:14
@Rob thank you for your feedback, updated it with CSS and some more context in HTML. I would like to have the card with "Content A" horizontally aligned with "Price summary" card. — Lukas
– Lukas, Commented Jan 3, 2023 at 19:49
If you know the paddings in your elements, then you can set the appropriate margin-top to "Price summary" — Ivan Beliakov
– Ivan Beliakov, Commented Jan 3, 2023 at 20:31
@IvanBeliakov unfortunately no, the "Products Info" text is dynamic and can be multiline... — Lukas
– Lukas, Commented Jan 3, 2023 at 20:47

G-Cyrillus · Accepted Answer · 2023-01-04 02:00:35Z

3

An option could be to use display:contents to get the contents on the same level , so they can be dispatch on the same grid ( from .checkout-form ).

Example:

.card {
  border: 1px solid #E2E3E3;
  border-radius: 4px;
  background-color: #FFF;
  padding: .5rem;
}

.checkout-form {
  padding: 1.5rem;
  background-color: #f9f9f9;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1rem;
}
/* update */
.checkout-form>div,
.checkout-form__main>section,
.checkout-form>div>section>section {
  display: contents;
  /* virtually hides those from the cascade */
}

.checkout-form__main * {
  grid-column: 1;
}

.checkout-form__cost .card {
  grid-row: 2/5;
  /* so it can grow without disturbing rows drawn by the first column */
  margin-block-end: auto;
  /*optionnal so it doesn't look hudge and empty if lille content */
  grid-column: 2;
}

<form class="checkout-form">
  <div class="checkout-form__main">
    <section>
      <section>
        <p>Products info</p>
        <article class="card">
          Content A
        </article>
      </section>
      <section>
        <p>Customer info</p>
        <article class="card">
          Content X
        </article>
      </section>
    </section>
  </div>
  <div class="checkout-form__cost">
    <section class="card">
      Price summary
    </section>
  </div>
</form>

answered Jan 4, 2023 at 2:00

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ivan Beliakov Over a year ago

This is a nice attribute, but I'd like to add that the browser support is not so good

G-Cyrillus Over a year ago

@IvanBeliakov for sure but not so bad if you mind the known issues. subgrid would be the right one, but it has worst supports ;) caniuse.com/?search=subgrid

Collectives™ on Stack Overflow

CSS Grid specific layout

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related