float, pozycjonowanie, div

Question

Hej 

Czy da rade wypozycjonować te kafelki tak żeby były jak na obrazku ale usprawniając trochę kod, można to jakoś sprytniej zrobić?

html

<div class="s"></div>
<div class="a"></div>
<div class="a"></div>
<div class="b"></div>
<div class="b"></div>

css

.s {
    width:210px;
    height:210px;
    background-color:red;
    float:left;
    
}
.a {
    width:100px;
    height:100px;
    background-color:blue;
    margin:0 10px 0 10px;
    float:left;  
}
.b {
    width:100px;
    height:100px;
    background-color:blue;
    margin:110px 10px 0 10px;
    float:left;
    position:relative;
    right:240px;
}

 

 

Answer 1

Możesz użyć grid-a

[ on-line ]

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1em 1em;
  grid-auto-flow: row;
  grid-template-areas:
    "left left . ."
    "left left . .";
  
  width: 80vw;
  height: 50vh;
  margin: 1em auto;

 

Comments

BTW, można i np. tak za pomocą grid-a.

[ on-line ]

  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1em 1em;
  grid-template-areas:
    "left . ."
    "left . .";