Quiero diseñar una cuadrícula como la del enlace https://imgur.com/a/yGdgMWZ . Este es mi código pero no se parece. ¿Y puede mostrarme una forma de optimizar este código porque se ve muy mal? Enlace HTML: https://codesandbox.io/s/thirsty-sea-eo3q3

.third-part{
    height:80vh;
}
.third-part p{
    text-align: center;
}
.London{
grid-area: box-1;
}
.Paris{
grid-area: box-2;
}
.Dubai{
grid-area: box-3;
}
.Amsterdam{
grid-area: box-4
}
.Athens{
grid-area: box-5;
}
.Newyork{
grid-area: box-6;
}
.Barcelona{
grid-area: box-7;
}
.grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap:2em;
    grid-template-areas: 
    "box-1 box-2 box-3 box-3"
    "box-4 box-5 box-3 box-3"
    "box-4 box-6 box-6 box-7";
}
.grid div{
    background-color: #ddd;
}
0
Marshall Đỗ 6 oct. 2019 a las 08:28

1 respuesta

La mejor respuesta

Cambió un poco su css. Ejecute el fragmento de código que hice que las cuadrículas fueran iguales a la imagen. Es difícil explicar aquí cómo funciona la cuadrícula, por lo que le sugiero que consulte
[ CSS Grid MDN ]] (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)
y eche un vistazo, comprenderá cómo funcionan las cuadrículas.

.third-part{
  height:80vh;
}
.third-part p{
  text-align: center;
}
.London{

}
.Paris{

}
.Dubai{
  grid-column: 3/5;
  grid-row: 1/3;
}
.Amsterdam{
grid-row: 2/4;
}
.Athens{

}
.Newyork{
grid-column: 2/4;
}
.Barcelona{

}
.grid{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-gap: 20px;
  grid-auto-rows: 150px;
  
}
.grid div{
  background-color: #ddd; 
}
<div class="third-part">
        <p>Popular Places</p>
        <div class="grid">
            <div class="London">London, United Kingdom</div>
            <div class="Paris">Paris, France</div>
            <div class="Dubai">Dubai, United Arab Emirates</div>
            <div class="Amsterdam">Amsterdam, Netherlands</div>
            <div class="Athens">Athens, Greece</div>
            <div class="Newyork">New York, Ny</div>
            <div class="Barcelona">Barcelona, Spain</div>
        </div>
0
Saksham27 6 oct. 2019 a las 06:49