27292 sujets

CSS et mise en forme, CSS3

Bonsoir,

Je cherche à faire une présentation de type "grid" avec CSS pour un blog avec des articles, et comme je viens de commencer, je bute sur un problème probablement assez simple à résoudre, mais que je ne parviens néanmoins pas à résoudre par moi-même.

En effet, je compte mettre une image, la catégorie, la date, le titre et les premières lignes d'un article dans ma div "item" (chaque "item" est un élément de la grid). Néanmoins, après avoir mis l'image, la catégorie, la date et le titre, lorsque j'insère le texte, il dépasse de la div et je ne parviens pas à faire en sorte que ce soit la div "item" qui adapte sa hauteur au contenu, et non pas que le texte sorte. Je sais qu'on peut faire un overflow scroll, mais je ne trouve pas cela très esthétique.

Connaîtriez-vous un moyen d'empêcher le contenu de sortir de la div "mère" ("item" dans le cas présent) ? Je compte en fait imbriquer plusieurs divs dans cette div mère "item", afin de pouvoir plus facilement adapter les styles.

Voici mon code HTML :

<div class="app">
  <div class="item">
  <div class="media" style="background:url('https://via.placeholder.com/300x150') no-repeat;"></div>
  <div class="barre">
  <span class="categorie">France</span>
  <span class="date">24 novembre 2019</span>
  </div>
  Lorem ipsum dolor sit amet
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non ligula non ligula fringilla commodo in sit amet nunc. Aliquam dictum massa neque, vitae porttitor arcu blandit nec. Maecenas enim ipsum, posuere eu sapien non, placerat pharetra est. Proin gravida, diam sed facilisis pretium, tellus enim venenatis libero, nec cursus arcu justo in tellus. Praesent volutpat, ligula eu nullam sodales.
  </div>
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
  <div class="item">item 9</div>
  <div class="item">item 10</div>
  <div class="item">item 11</div>
  <div class="item">item 12</div>  
</div>


Voici mon code CSS :

.app {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 200px;
grid-auto-flow: dense;
border: 5px solid red;
}
.item{
    background: whitesmoke;
    border: 5px solid #282828;
    height: auto;
    width: auto;
}
.item:nth-of-type(3n) {
  grid-column: span 2;
}

.item:nth-of-type(5n) {
  grid-row: span 2;
}
/* FIN DES TUILES */
.date, .categorie {
    display: inline-block;
}
.date {
    float: right;
}
.media {
    width: 100%;
    height: 50%;
    box-sizing: content-box;
    background-size: cover;
}
.titre {
    font-size: 26px;
    box-sizing: content-box;
    width: 100%;
}
.resume {
    box-sizing: border-box;
}


J'ai indiqué le problème sur la capture d'écran par la flèche bleue.
upload/1574629033-77934-capture.png

Par avance, je vous remercie de votre aide !
Tu ne peux pas mettre plus de texte/image que chaque contenant peut contenir sauf de cacher une partie ou autoriser le scroll !
c'est enfantin, ajoutes à ton CSS de chaque contenant:

.item{
    background: whitesmoke;
    border: 5px solid #282828;
    height: auto;
    width: auto;
    overflow:auto;
}

overflow a pour propriété a les valeurs suivantes:

visible- Défaut. Le débordement n'est pas coupé. Le contenu s'affiche en dehors de la zone de l'élément
hidden - Le débordement est tronqué et le reste du contenu sera invisible.
scroll - Le débordement est tronqué et une barre de défilement est ajoutée pour afficher le reste du contenu.
auto- Similaire à scroll, mais ajoute des barres de défilement uniquement lorsque cela est nécessaire
Modifié par Jean-Pierre-Bruneau (24 Nov 2019 - 23:54)
Bonjour,
tu peux aussi mettre grid-template-rows: auto;
Dans ce cas, la hauteur de l'item va s'allonger en fonction du texte, mais par contre, tous les autres items de la ligne vont s'allonger en conséquence. Ça peut être disgracieux si seulement le premier item comporte du texte. Sur les autres, il y aura du vide. Et la solution avec une barre de défilement risque d'être disgracieuse, en plein milieu du site. Avec grid, tu peux facilement décider d'appliquer auto seulement sur la première ligne et mettre des valeurs fixes sur les autres, ou utiliser 1fr. Par exemple, si tu as trois lignes (rows) sur ton site, disons, un header, les images et un footer, tu peux utiliser : grid-template-rows: 8em auto 30em; Seul, le milieu va s'allonger en fonction du contenu. Et n'oublie pas de mettre : min-height: 100vh; Comme on ne voit pas ton site, il est difficile d'extrapoler. Je serais curieux d'une meilleure solution venant des spécialistes de grid.
IE 6 ne supporte pas minmax, je crois, mais qui utilise encore IE 6 !
Modifié par Bongota (25 Nov 2019 - 09:38)
Merci beaucoup à tous pour vos conseils ! Les solutions apportées par gcyrillus et Bongota me semblent les plus adaptées à ce que je veux faire, je compte faire encore quelques essais avant de marquer ce sujet comme résolu, mais je crois qu'on tient le bon bout ! Cdt, eyescrime13 Smiley cligne
Administrateur
Hello,

Pour apporter plus de précisions :
- grid-template-rows sert à gérer la hauteur (et le nombre) des rangées explicites. La valeur par défaut "auto" est généralement idéale
- grid-auto-rows sert à gérer la hauteur des rangées implicites. La valeur par défaut "auto" est généralement idéale et c'est à cause de ton 200px que tu forces une hauteur inutile ici.

Supprime la ligne contenant grid-auto-rows et tu retrouveras la (bonne) valeur "auto".

Bongota a écrit :
IE 6 ne supporte pas minmax, je crois, mais qui utilise encore IE 6 !

Bah, disons que pour le coup, IE6 ne reconnaît pas minmax en effet, mais pas non-plus min-height et tout simplement pas Grid Layout (support - mauvais - depuis IE10 minimum) ! Smiley langue
Modifié par Raphael (25 Nov 2019 - 11:28)