Est-il possible de créer une grille CSS sans utiliser de requêtes multimédias?
Dans mon cas, j'ai un nombre non déterministe d'éléments que je veux placer dans une grille et je veux que cette grille s'enroule. En utilisant Flexbox, je ne parviens pas à espacer correctement les choses de manière fiable. J'aimerais aussi éviter un tas de requêtes médiatiques.
Voici un exemple de code :
.grid {
display: grid;
grid-gap: 10px;
grid-auto-flow: column;
grid-template-columns: 186px 186px 186px 186px;
}
.grid > * {
background-color: green;
height: 200px;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>Et voici une image GIF:
En passant, si quelqu'un peut me dire comment je pourrais éviter de spécifier la largeur de tous les éléments comme je le suis, grid-template-columnsce serait formidable. Je préférerais que les enfants spécifient leur propre largeur.
grid-template-columns: auto auto auto auto;fonctionne dans ce cas? =)Réponses:
Utilisez l'un
auto-fillou l' autreauto-fitcomme numéro de répétition de larepeat()notation.auto-fillLa grille répétera autant de pistes que possible sans déborder de son conteneur.
Dans ce cas, étant donné l'exemple ci-dessus (voir image) , seules 5 pistes peuvent rentrer dans la grille-conteneur sans déborder. Il n'y a que 4 éléments dans notre grille, donc un cinquième est créé comme une piste vide dans l'espace restant.
Le reste de l'espace restant, la piste n ° 6, termine la grille explicite. Cela signifie qu'il n'y avait pas assez d'espace pour placer une autre piste.
auto-fitLe
auto-fitmot-clé se comporte de la même manière queauto-fill, sauf qu'après l' algorithme de placement des éléments de grille, toutes les pistes vides dans l'espace restant seront réduites en0.La grille répètera toujours autant de pistes que possible sans déborder de son conteneur, mais les pistes vides seront réduites en
0.Une piste réduite est traitée comme ayant une fonction de dimensionnement de piste fixe de
0px.Contrairement à l'
auto-fillexemple d'image, la cinquième piste vide est réduite, mettant fin à la grille explicite juste après le quatrième élément.auto-fillcontreauto-fitLa différence entre les deux est perceptible lorsque la
minmax()fonction est utilisée.Utilisez
minmax(186px, 1fr)pour étendre les éléments de186pxà186pxplus une fraction de l'espace restant dans le conteneur de grille.Lors de l'utilisation
auto-fill, les éléments grandiront une fois qu'il n'y aura plus d'espace pour placer des pistes vides.Lors de l'utilisation
auto-fit, les éléments grandissent pour remplir l'espace restant car toutes les pistes vides sont réduites0px.Terrain de jeux:
CodePen
Inspection des pistes à remplissage automatique
Inspection des pistes à ajustement automatique
la source
display: gridutilisation de l' élémentjustify-content: centerrepeat(auto-fill, minmax(186px, 1fr));n'est pas des pixels, mais aussi longtemps que le div contient du texte?Vous voulez soit
auto-fitouauto-fillà l'intérieur de larepeat()fonction:La différence entre les deux devient évidente si vous utilisez également a
minmax()pour permettre des tailles de colonne flexibles:Cela permet à vos colonnes de varier en taille, allant de 186 pixels à des colonnes de largeur égale s'étendant sur toute la largeur du conteneur.
auto-fillcréera autant de colonnes que la largeur. Si, par exemple, cinq colonnes correspondent, même si vous n'avez que quatre éléments de grille, il y aura une cinquième colonne vide:Utiliser à la
auto-fitplace empêchera les colonnes vides, étirant davantage les vôtres si nécessaire:la source
Vous recherchez peut-être
auto-fill:Démo: http://codepen.io/alanbuchanan/pen/wJRMox
Pour utiliser plus efficacement l'espace disponible, vous pouvez utiliser
minmaxet passerautocomme deuxième argument:Démo: http://codepen.io/alanbuchanan/pen/jBXWLR
Si vous ne voulez pas les colonnes vides, vous pouvez utiliser à la
auto-fitplace deauto-fill.la source
J'ai eu une situation similaire. En plus de ce que vous avez fait, je voulais centrer mes colonnes dans le conteneur sans autoriser les colonnes vides à gauche ou à droite:
la source
Voici ma tentative. Excusez les peluches, je me sentais très créative.
Ma méthode est un parent
divaux dimensions fixes . Le reste ajuste simplement le contenu à l'intérieur de cette div en conséquence.Cela redimensionnera les images quel que soit le rapport hauteur / largeur. Il n'y aura pas non plus de recadrage dur .
la source