How do I place a div/card like this?-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

How do I place a div/card like this?

P粉218775965 2023-09-08 16:28:44

445

I'm having trouble positioning a div like the one in the photo.

I've tried something like this, but I'm having trouble styling and positioning it using css.

A single div is named after the first two cards/divs. The second div is named the second card/div down.

P粉218775965

reply all (1)

P粉6800875502023-09-09 11:38:16 1 floor

CSS Grid can help you with these types of layouts. Study the code below to see how to lay out the boxes based on the model.

Be sure to carefully study the following section on MDN aboutGrid Template Areas:Leave Grid Cells Blank

div { border: 1px solid black; } .strategy { grid-area: strategy; } .efficient { grid-area: efficient; } .fast { grid-area: fast; } .reliable { grid-area: reliable; } .wrapper { width: 500px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "fast efficient ." /* 3 cols: fast / efficient / . === empty col */ ". strategy reliable"; }