Grid bei unterschiedlicher Aufösung
Hallo in die Runde :),
habe eine Frage zum Thema Grid:
Wenn ich den Viewport verkleinere überlagern sich alle Spaten, das Ganze wird quasi zusammen gestaucht. Wie genau kann ich dem entgegenwirken?
Freue mich über Hilfestellung und Tipps!
Beste Grüße :wacko:
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<style>
*{
border:1px solid red;
}
header {
text-align: right;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.2fr 0.2fr;
grid-template-areas: "ueberschrift ueberschrift navigation navigation" "p p pic pic";
}
header article {
display: grid;
grid-template-columns: 1.3fr 0.4fr 1.3fr;
grid-template-rows: 1fr;
grid-template-areas: "p1 . p2";
grid-area: p;
text-align: justify;
}
header p:nth-child(odd) {
grid-area: p1;
opacity: 1;
}
header p:nth-child(even) {
grid-area: p2;
opacity: 1;
}
header img {
margin: auto;