Instagram | Twitter | LinkedIn
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;
}
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;
}