grid-Problem

rernanded

rernanded

Erfahrenes Mitglied
Hi,
bei nachfolgendem Code werden die items horizontal wie folgt angeordnet:

2 direkt nebeneinander, dann trennstrich, 2 direkt nebeneinander, dann trennstrich, 3 direkt nebeneinander, dann trennstrich, 2 direkt nebeneinander, dann trennstrich, 1 alleine

dann Umbruch
und alles wie oben.
Frage: Wieso?

HTML: 
<style>
body{
background-color: #000;
}

.gridcontainer{
display: grid; 
grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
}

.gridcontainer .item{
            align-items: center;
            justify-content: center;
            background-color: #FFF;
            text-align: center;
            /*text-align: justify;*/
            /*border-radius: 0px;*/
            /*box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0);*/
            /*border: solid 0px #FFF;*/ 
        /*margin: 0px 0px 0px 0px;*/

            animation: 0.6s ease-out SlideInFromRight forwards;
        }
@keyframes SlideInFromRight {
            0% {
                transform: rotate(0deg) translateX(100%);
            }

            100% {
                transform: rotate(0deg) translateX(0%);
            }
}

.item h1 {
        padding: 13px 13px 13px 13px;
            position: relative;
           font-size: 20px;
        color: #000;    
            word-wrap: break-word;
}
.item p {
            padding: 13px 13px 13px 13px;
            position: relative;
            font-size: 16px;
        color: #000;    
            word-wrap: break-word;
}
</style>

</head>
<body>

<div class="gridcontainer">

<div class="item"><p>wow</p></div>
<div class="item"><p>wow</p></div>
<div class="item"><p>wow</p></div>
<div class="item"><p>wow</p></div>
<div class="item"><p>wow</p></div>
<div class="item"><p>wow</p></div>
<div class="item"><p>wow</p></div>
<div class="item"><p>wow</p></div>
<div class="item"><p>wow</p></div>
<div class="item"><p>wow</p></div>

<div class="item"><p>wow</p></div>
<div class="item"><p>wow</p></div>
<div class="item"><p>wow</p></div>
<div class="item"><p>wow</p></div>
<div class="item"><p>wow</p></div>
<div class="item"><p>wow</p></div>
<div class="item"><p>wow</p></div>
<div class="item"><p>wow</p></div>
<div class="item"><p>wow</p></div>
<div class="item"><p>wow</p></div>

</div><!-- END class="gridcontainer"-->
</body>


MONI
 
Bei mir im Opera tauchen die Striche nur während der Animation auf. Ich vermute, dass es kein Fehler in deinem CSS ist sondern dass es sich um einen Effekt durch Interpolation bei der Animation handelt. Da werden dann Pixel halbdurchlässig dargestellt so dass der schwarze Hintergrund durchscheint. Da fallen mir mehrere Möglichkeiten ein, es zu beheben:
  • Den Items links und rechts ein kleines negatives Margin von 1px geben.
  • Dem Grid-Container einen weißen Hintergrund geben.
  • Nicht die Items einzeln sondern den ganzen Container animieren.
 
yeap, drei gute ideen, danke dir, ich probiers aus. ich benutze übrigens firefox - neueste version.

moni
 
lösung nr. 3
  • Nicht die Items einzeln sondern den ganzen Container animieren.

schafft abhilfe

danke nochmals, hätte ich aber auch selbst drauf kommen können. ;-)))

MONI
 
habe noch eine frage:

wie kriege ich es hin, dass sich die höhe des item nach der breite (hier z.b. 10% des screen) richtet.
normal würde ich ja z.b. grid-template-rows: auto; oder einen bestimmten wert in px etc. angeben?

ziel: so dass es am ende immer quadrate sind, egal bei welchem screen - pc, tablet, smartphone, hoch, quer usw.

MONI
 
UPPS. Hab es mal aufs item angewandt [aspect-ratio: 1 / 1;] - scheint zu klappen, oder muß ich es auf grid-template-rows anwenden?

MONI
 
Ja, ich denke, Du musst es auf das Element anwenden, das das Seitenverhältnis annehmen soll, also auf die Items.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück