Início / coding / Perguntas / 79185396
Accepted
Rogier de Ruijter
Asked: 2024-11-13 22:38:03 +0800 CST

Como posso obter sangria total em uma grade aninhada?

  • 772

Quero ter a capacidade de fazer sangrias completas (exibindo um item de ponta a ponta na viewport) dentro da minha configuração de grade. Gostaria de ter o item com a classe full-bleedpara abranger a grade de design e a grade de wrapper.

Estou aberto a outras maneiras de construir o DOM para que isso funcione, mas gostaria de continuar usando grade em vez de posicionamento absoluto.

.wrapper-grid {
  display: grid;
  grid-template-columns: 1fr min(65ch, 100%) 1fr;
  row-gap: 1rem;
}

.design-grid {
  display: grid;
  /* I can't have subgrid and declare a new grid */
  /* grid-template-clomns: subgrid; */
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.wrapper-grid>* {
  grid-column: 2;
}

.full-bleed {
  grid-column: 1 / -1;
}

.item {
  height: 40px;
  background-color: #f1f1f1;
}
<body class="wrapper-grid">
  <div class="design-grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item full-bleed">This item should go to both edges of the viewport</div>
    <div class="item"></div>
  </div>
</body>

css

2 respostas

  1. Best Answer

    Aqui está uma ideia usando margem com algum cálculo. Além disso, você não precisa usar uma configuração de grade aninhada. Uma grade é o suficiente.

    Artigo relacionado do meu blog para entender o uso de margin-inline: https://css-tip.com/center-max-width/

    .wrapper-grid {
  --w: 65ch; /* the max width*/
  
  margin-inline: max(0px, (100vw - var(--w))/2);
}

.design-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.full-bleed {
  grid-column: 1 / -1;
  /* this one is the opposite of the above to negate it and get the full bleed effect */
  margin-inline: min(0px, (var(--w) - 100vw)/2);
}

.item {
  height: 40px;
  background-color: #f1f1f1;
}
    <body class="wrapper-grid">
  <div class="design-grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item full-bleed">This item should go to both edges of the viewport</div>
    <div class="item"></div>
  </div>
</body>

    E caso você queira manter sua grade aninhada

    .wrapper-grid {
  --w: 65ch; /* the max width*/
  
  display: grid;
  grid-template-columns: 1fr min(var(--w), 100%) 1fr;
  row-gap: 1rem;
}

.design-grid {
  display: grid;
  grid-column: 2;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.full-bleed {
  grid-column: 1 / -1;
  /* this one is the opposite of the above to negate it and get the full bleed effect */
  margin-inline: min(0px, (var(--w) - 100vw)/2);
}

.item {
  height: 40px;
  background-color: #f1f1f1;
}
    <body class="wrapper-grid">
  <div class="design-grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item full-bleed">This item should go to both edges of the viewport</div>
    <div class="item"></div>
  </div>
</body>

    • 5

  2. Você pode criar sua grade usando mais colunas do que o conteúdo requer e, então, ajustar a extensão das colunas na linha que precisa preencher a largura da tela.

    Observação: provavelmente existe um método menor, mas espero que isso tenha esclarecido a questão.

    .wrapper-grid {
  margin: 0 auto;
  width: 100%;
}
.design-grid {
  min-height: 200px;
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-areas:
    'r1c1 r1c2 r1c3 r1c4 r1c5 r1c6' 
    'r2c1 r2c2 r2c3 r2c4 r2c5 r2c6'
    'r3c1 r3c2 r3c3 r3c4 r3c5 r3c6';
  grid-gap: .2rem;
}
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: cyan;
}
.item:nth-child(1) {grid-area: r1c2;}
.item:nth-child(2) {grid-area: r1c3;}
.item:nth-child(3) {grid-area: r1c4;}
.item:nth-child(4) {grid-area: r1c5;}
.item:nth-child(5) {grid-column: span 6 }
.item:nth-child(6) {grid-area: r3c2;}
    <body class="wrapper-grid">
  <div class="design-grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item full-bleed">This item should go to both edges of the viewport</div>
    <div class="item"></div>
  </div>
</body>

    • 1

relate perguntas