Definir la taille des cellules en CSS Grid

Programmation
#1

Bonjour

Pourrais-je avoir des explications sur la logique de découpage appliqué ci dessous
https://nosmoking.developpez.com/demos/rep-forum/grid-template-areas.html

en l occuurence :

  • A = 270px
  • B = 270px
  • C = 360px
  • D = 180px

On découpe le conteneur, dans sa largeur, en trois colonnes : Col-1 = 270px, Col-2 = 90px et Col-3 = 180px.

On définie nos 4 zones comme suit :

A = 270px (Col-1)
B = 90px + 180px (Col-2 + Col-3)
C = 270px + 90px (Col-1 + Col-2)
D = 180px (Col-3)

j’ai du mal a comprendre pourquoi B a deux valeurs 90px puis 180px et le C=270px +90px

Merci d avance.

1 J'aime
#2

Non, B est la somme de la colonne 2 et de la colonne 3.
Et C est la somme de la colonne 1 et de la colonne 3.
Du coup la matrice devient bien sur les trois colonnes
A - B - B
C - C - D
A= 270
B= 90 + 180
C= 270 + 90
D= 180

C’est clairement décrit :slight_smile:
En gros c’est comme dans un excal ou cal de libreoffice. Si tu veux faire la même chose il te faut autant de colonne que tu peux tracer de trais verticaux.
Ensuite tu fusionne les colonnes pour faire les cellules dont tu as besoin.

1 J'aime