Building responsive squares

How do I build a square that is responsive? A square that responds to the behavior of the window element. If the window shrinks, the square should also shrink relative to the window. With the nice CSS function aspect-ratio: 1/1 this can be done easily and quickly.

<div class="w">
    <div class="c"></div> 
</div> 
* {   
  margin: 0;   
  padding: 0;   
  box-sizing: border-box; 
} 
.w {   
  width: 100%;   
  padding:20px; 
} 
.c {   
  border: 2px solid #000;   
  width:100%;   
  max-width:600px;   
  aspect-ratio: 1/1;   
}

That was it 🙂


Leave a Comment

Your email address will not be published. Required fields are marked *

*

*

Empfholende Artikel


CSS Einfache Bilder Gallery mit unterschiedlich hohen Bildern

April 1, 2022

Wer als Dev schon mal mit Bildern zu tun hatte weiß es. Bilder sind in den seltensten Fällen immer gleich groß. Aber es gibt ja auch fancy Bildergallerien die sich genau diese Diversität zu nutze machen. Und auch genau deswegen so cool aussehen. Das lässt sich ziemlich leicht mit purem CSS lösen. https://codepen.io/seotheater/pen/YzYrBqp

CSS not() – What?

March 26, 2022

Stellt Euch vor ihr möchtet eine CSS Property einem ganzen container zuweisen außer einem einzigen element nicht. Ihr könnt es jetzt schön manuel machen oder dem parent Element die Property zweusen aber im Selector die Pseudoklasse :not(‘selector’) noch verwenden. Somit erben alle Kinder bis auf das eine welches man aus seinem “Erbe” 😉 ausgetragen hat. […]

Wer Padding sagt sollte box-sizing in Erwägung ziehen

March 23, 2022

Schnell ist innerhalb einer Box ein padding links und ein padding rechts hinzugefügt. Was einigen abernicht bewusst ist, dass die padding die width des Containers ebenfalls beinflusst. Aus diesem Grund sollte man, wenn man das nicht wünscht ein box-sizing: border-box; dem Element mit dem Padding hinzufügen. Bei parent habe ich es nicht hinzugefügt und ihr […]