Comment étendre une division sur plusieurs lignes et colonnes dans une grille sans utiliser de disposition de grille ou de tableau ?

Comment puis-je créer un Div Span sur plusieurs lignes et colonnes dans une grille à l'aide de techniques sans grille ?

Malgré avoir précédemment exploré des solutions pour s'étendant sur plusieurs lignes, le défi réside désormais dans la couverture à la fois des lignes et des colonnes. Pour y parvenir sans utiliser les dispositions grille ou table, envisagez les approches suivantes :

Prise en charge du navigateur pour la grille CSS

Depuis qu'ils ont soulevé cette question, les principaux navigateurs ont publié des versions prenant entièrement en charge CSS Grid Layout. Cette approche de mise en page simplifiée élimine le besoin de modifications HTML, de conteneurs imbriqués ou de corrections de hauteur de conteneur.

Implémentation de la grille CSS

Voici un exemple d'implémentation utilisant Grille CSS  :

<code class="css">#wrapper {
    display: grid;                            /* 1 */
    grid-template-columns: repeat(5, 90px);   /* 2 */
    grid-auto-rows: 50px;                     /* 3 */
    grid-gap: 10px;                           /* 4 */
    width: 516px;
}

.tall {
    grid-row: 1 / 3;                          /* 5 */
    grid-column: 2 / 3;                       /* 5 */
}

.wide {
    grid-row: 2 / 4;                          /* 6 */
    grid-column: 3 / 5;                       /* 6 */
}

.block {
    background-color: red;
}</code>

Le code ci-dessus utilise une Grille CSS avec des colonnes de taille égale et des lignes de taille automatique. La classe .tall s'étend sur deux lignes (1 et 2) et la classe .wide s'étend sur deux colonnes (3 et 4), comme l'indiquent les propriétés grid-row et grid-column. La propriété grid-gap ajoute de l'espace entre les éléments.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!