css-quiz-css-grid-negative-lines.md

👋🏼 Welcome 👋🏼

Instagram | Twitter | LinkedIn

Choose your language 👅

• English
• Spanish

English version 🚀

Considering the following code (HTML and CSS), What would you see in the browser: A or B ?

Click here to see the correct answer and explanation 👀

Correct Answer	Explanation
A	Look at the image below for more clarify 😃

Explicación basada en 👉🏼 40 CSS Grid Diagrams For Visual Learners Recommended reading 👉🏼 Negative Grid Lines

Code:

HTML:

<div class="grid">
  <div class="item"></div>
</div>

CSS:

.grid {
  background: papayawhip;
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.item {
  background: hotpink;
  grid-column: 3 / 5;
  grid-row: -2 / -4;
}

Spanish version 🚀

Considerando el siguiente código (HTML y CSS), ¿Qué verías en el navegador: A o B?

Haz click aquí para ver la respuesta correcta y su explicación 👀

Respuesta correcta	Explicación
A	Mira la imagen de abajo para más claridad 😃

Explicación basada en 👉🏼 40 CSS Grid Diagrams For Visual Learners Lectura recomendada 👉🏼 Negative Grid Lines

Código completo:

HTML:

<div class="grid">
  <div class="item"></div>
</div>

CSS:

.grid {
  background: papayawhip;
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.item {
  background: hotpink;
  grid-column: 3 / 5;
  grid-row: -2 / -4;
}