Grille responsive en html ?

**Fred2FR3** · 03/05/2025, 11h41

Salut Robert
Je te conseille de faire connaissance avec bootstrap, tu peux charger que la grille.

**RobertG** · 03/05/2025, 11h46

Merci Fred,
Je dois dire que le CSS, Grid, Boostrap et moi, ce n'est pas le grand amour.

**Fred2FR3** · 03/05/2025, 12h23

Ben c'est pas bien compliqué pour ce que tu souhaite faire :

Tu télécharges Compiled CSS and JS là : https://getbootstrap.com/docs/5.3/ge...rted/download/
Dans cette archive, dans le dossier CSS, tu ne prends que bootstrap-grid.min.css
<link rel="stylesheet" href="css/bootstrap-grid.min.css" type="text/css" > dans ton <head> HTML
Ensuite la doc plutôt bien faite : https://getbootstrap.com/docs/5.3/layout/grid/

Après si tu veux vraiment un truc plus leger, faut étudié un peu le principe des grids prise en charge nativement, c'est assez amusant mais cela prend un peu de temps : https://css-tricks.com/snippets/css/...te-guide-grid/

Perso j'aime travailler avec les deux, mais le plus simple et le mieux documenté reste bootstrap sans aucun doute.

[edit] je vais tu faire un p'tit truc concret, quelques minutes [/EDIT]

**lomart** · 03/05/2025, 13h20

Bonjour Robert,

Tu peux utiliser l'action Flexauto de UP

Code:

{up flexauto=2}
pavé 1
{====}
pavé 2
{====}
pavé 3
{====}
pavé 4
{/up flexauto}

Les 4 blocs en haut de up.lomart.fr sont fait avec cette méthode

**Fred2FR3** · 03/05/2025, 14h01

Voila Robert,

J'ai essayé de te montrer que ce n'est pas si difficile et j’espère que tu jetteras un œil sur le code source. Je précise que je n'avais pas fais ca depuis un bout de temps, donc une fois les bases acquise, tu fais plein de truc avec BS et sa documentation.

Fichiers joints

robert.zip (1 007 octets, 7 affichage(s))

**RobertG** · 03/05/2025, 14h32

Merci à tous les deux, je verrai ces deux solutions dès que possible.

Au fait Loïc, ce n'est pas une page Joomla! mais une simple HTML.

**RobertG** · 03/05/2025, 16h17

Merci beaucoup Fred,

J'ai remplacé le code des liens et les images. Il va falloir que je comprenne pourquoi en mode portrait sur mon smartphone ça déborde à droite et en paysage il y a un décalage aussi, avec la marge gauche plus importante que la droite.
Sur l'écran du PC, ça reste centré, avec quand même un moment où l'image droite chevauche la gauche avant de passer dessous, lorsque je réduis la largeur du navigateur.
Le fait de ne pas voir de règles CSS dans la page me désappointe...

**lomart** · 03/05/2025, 16h50

Envoyé par RobertG Voir le message

Au fait Loïc, ce n'est pas une page Joomla! mais une simple HTML.

Je n'avais pas fait attention
Dans ce cas, tu récupères le fichier plugins/content/up/assets/up.css d'une installation UP
et tu as toutes les explications ici : https://up.lomart.fr/liste-css/css-flexgrid

Dans ton cas, ce dois être ceci :

Code HTML:

<div class="fg-row fg-gap fg-auto-2 fg-auto-s1">
  <div>pavé-1</div>
  <div>pavé-2</div>
  <div>pavé-3</div>
  <div>pavé-3</div>
</div>

En responsive, il faut utiliser des largeurs en pourcentage

Code HTML:

<div class="content">
    <h2 style:"text-align:center;="">Les petites autos</h2>
    <a href="https://les-petites-autos.xn--de-erg-gva.fr" target="_blank"><img src="../images/Alpine_400.webp" width="90%" height="auto" alt="Alpine A110 1971" longdesc="Les petites autos de Ergé"></a><br>
</div>

**RobertG** · 03/05/2025, 17h04

Merci Loïc !

**Fred2FR3** · 03/05/2025, 19h27

Je ne reproduit pas ce que tu mentionnes...

**RobertG** · 04/05/2025, 08h36

Merci ! En redéfinissant la largeur des images à 80% u lieu de 400 px, j'ai maintenant ce qui me convient : plus de chevauchement et site bien centré sur mon smartphone.

**Fred2FR3** · 04/05/2025, 18h28

Excuses moi, cela est vexant, on te donne des solutions qui sont presque professionnelle et tu choisis de rester en 1999 ...

**RobertG** · 04/05/2025, 18h33

C'est pourtant ta solution que j'ai utilisée, avec simplement le remplacement de l'appel aux images et des liens

Grille responsive en html ?

[RÉGLÉ] Grille responsive en html ?

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association