I'm trying to achieve element arrangement via grid template area but it doesn't work. I'm trying to use a grid system to arrange blocks vertically and horizontally. Use the picture on the left and the text on the other side. Why doesn't this code work?
.news__wrapper { display: grid; grid-template-areas: "a a c" "b b c"; } .news__item { display: flex; align-items: center; justify-content: center; } .news__item-image { width: 349px; height: 360px; } .news__item-image { background: "url(https://place-hold.it/300x500) 50% 50% no-repeat"; }
Lorem,
Lorem ipsum
Lorem,
Lorem
Lorem,
Lorem ips
https://codesandbox.io/s/blissful-bush-tngxm8?file=/src/styles.css
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
When you use
grid-template-areas, you need to assigngrid-areavalues to elements within the grid.In short, adding the following
csscode will achieve the desired result:.news__item:first-child { grid-area: a; } .news__item:nth-child(2) { grid-area: b; } .news__item:nth-child(3) { grid-area: c; }