CSS 网格中的每周计划

Question

目前正在努力对齐 CSS 网格项目中的项目。日期需要在左上角，“吃”在左上角，子项在项目底部 - 第 1 天应该居中。

我只能将整个内容居中，但是使用绝对位置时，其他文本会移动到页面底部而不是父网格范围。

plan {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 25vw;
  grid-gap: 0px;
}

plan-meal {
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

plan-meal > span{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%; 
  background-color:rgb(0,0,0, 0.3);
  flex-direction:column;
}

plan-meal > span:hover{
  background-color:rgb(0,0,0, 0.1);
}

<plan>
   <plan-meal style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')">
      <span>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Mon, 21. Nov</p>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Eat</p>
         <h1 style="color: #fff;font-size: 1.5vw;line-height: 1.6vw;white-space: nowrap;
            text-overflow: ellipsis; width:100%; text-align: center;">Day 1</h1>
         <span style="color: #fff;font-size: 1.2vw; white-space: nowrap;
            text-overflow: ellipsis; width:95%; text-align: center;">This is the sub</span>
      </span>
   </plan-meal>
   <plan-meal style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')">
      <span>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Tue, 22. Nov</p>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Eat</p>
         <h1 style="color: #fff;font-size: 1.5vw;line-height: 1.6vw;white-space: nowrap;
            text-overflow: ellipsis; width:100%; text-align: center;">Day 2</h1>
         <span style="color: #fff;font-size: 1.2vw; white-space: nowrap;
            text-overflow: ellipsis; width:95%; text-align: center;">This is the sub</span>
      </span>
   </plan-meal>
   <plan-meal style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')">
      <span>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Weg, 23. Nov</p>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Eat</p>
         <h1 style="color: #fff;font-size: 1.5vw;line-height: 1.6vw;white-space: nowrap;
            text-overflow: ellipsis; width:100%; text-align: center;">Day 3</h1>
         <span style="color: #fff;font-size: 1.2vw; white-space: nowrap;
            text-overflow: ellipsis; width:95%; text-align: center;">This is the sub</span>
      </span>
   </plan-meal>
   <plan-meal style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')">
      <span>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Thu, 24. Nov</p>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Eat</p>
         <h1 style="color: #fff;font-size: 1.5vw;line-height: 1.6vw;white-space: nowrap;
            text-overflow: ellipsis; width:100%; text-align: center;">Day 4</h1>
         <span style="color: #fff;font-size: 1.2vw; white-space: nowrap;
            text-overflow: ellipsis; width:95%; text-align: center;">This is the sub</span>
      </span>
   </plan-meal>
   <plan-meal style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')">
      <span>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Fri, 25. Nov</p>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Eat</p>
         <h1 style="color: #fff;font-size: 1.5vw;line-height: 1.6vw;white-space: nowrap;
            text-overflow: ellipsis; width:100%; text-align: center;">Day 5</h1>
         <span style="color: #fff;font-size: 1.2vw; white-space: nowrap;
            text-overflow: ellipsis; width:95%; text-align: center;">This is the sub</span>
      </span>
   </plan-meal>
   <plan-meal style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')">
      <span>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Sat, 26. Nov</p>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Eat</p>
         <h1 style="color: #fff;font-size: 1.5vw;line-height: 1.6vw;white-space: nowrap;
            text-overflow: ellipsis; width:100%; text-align: center;">Day 6</h1>
         <span style="color: #fff;font-size: 1.2vw; white-space: nowrap;
            text-overflow: ellipsis; width:95%; text-align: center;">This is the sub</span>
      </span>
   </plan-meal>
   <plan-meal style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')">
      <span>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Sun, 27. Nov</p>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Eat</p>
         <h1 style="color: #fff;font-size: 1.5vw;line-height: 1.6vw;white-space: nowrap;
            text-overflow: ellipsis; width:100%; text-align: center;">Day 7</h1>
         <span style="color: #fff;font-size: 1.2vw; white-space: nowrap;
            text-overflow: ellipsis; width:95%; text-align: center;">This is the sub</span>
      </span>
   </plan-meal>
   <plan-meal style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')">
      <span>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Mon, 21. Nov</p>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Eat</p>
         <h1 style="color: #fff;font-size: 1.5vw;line-height: 1.6vw;white-space: nowrap;
            text-overflow: ellipsis; width:100%; text-align: center;">Coconut Curry with green chillies</h1>
         <span style="color: #fff;font-size: 1.2vw; white-space: nowrap;
            text-overflow: ellipsis; width:95%; text-align: center;">This is the sub</span>
      </span>
   </plan-meal>
   <plan-meal style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')">
      <span>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Mon, 21. Nov</p>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Eat</p>
         <h1 style="color: #fff;font-size: 1.5vw;line-height: 1.6vw;white-space: nowrap;
            text-overflow: ellipsis; width:100%; text-align: center;">Coconut Curry with green chillies</h1>
         <span style="color: #fff;font-size: 1.2vw; white-space: nowrap;
            text-overflow: ellipsis; width:95%; text-align: center;">This is the sub</span>
      </span>
   </plan-meal>
   <plan-meal style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')">
      <span>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Mon, 21. Nov</p>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Eat</p>
         <h1 style="color: #fff;font-size: 1.5vw;line-height: 1.6vw;white-space: nowrap;
            text-overflow: ellipsis; width:100%; text-align: center;">Coconut Curry with green chillies</h1>
         <span style="color: #fff;font-size: 1.2vw; white-space: nowrap;
            text-overflow: ellipsis; width:95%; text-align: center;">This is the sub</span>
      </span>
   </plan-meal>
   <plan-meal style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')">
      <span>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Mon, 21. Nov</p>
         <h1 style="color: #fff;font-size: 1.5vw;line-height: 1.6vw;white-space: nowrap;
            text-overflow: ellipsis; width:100%; text-align: center;">Coconut Curry with green chillies</h1>
         <span style="color: #fff;font-size: 1.2vw; white-space: nowrap;
            text-overflow: ellipsis; width:95%; text-align: center;">This is the sub</span>
      </span>
   </plan-meal>
</plan>

Answer 1

.plan {
  display: grid;
  grid-template-columns: repeat(4, 25vw) ;
  grid-auto-rows: 25vw;
  grid-gap: 0px;
}

.plan-meal {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.plan-meal > div {
  height: 25vw; 
  background-color:rgb(0,0,0, 0.3);
  position: relative;
}

.plan-meal > div > h1 {
  margin: 10vw auto; 
}

.plan-meal > div > p:last-child {
  position: absolute;
  bottom: 0;
  left: 0;
}

.plan-meal > div:hover {
  background-color:rgb(0,0,0, 0.1);
}

<div class="plan">
   <div class="plan-meal" style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')">
      <div>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Mon, 21. Nov</p>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Eat</p>
         <h1 style="color: #fff;font-size: 1.5vw;line-height: 1.6vw;white-space: nowrap;
            text-overflow: ellipsis; width:100%; text-align: center;">Day 1</h1>
         <p><span style="color: #fff;font-size: 1.2vw; white-space: nowrap;
            text-overflow: ellipsis; width:95%; text-align: center;">This is the sub</span></p>
      </div>
   </div>
   <div class="plan-meal" style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')">
      <div>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Mon, 21. Nov</p>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Eat</p>
         <h1 style="color: #fff;font-size: 1.5vw;line-height: 1.6vw;white-space: nowrap;
            text-overflow: ellipsis; width:100%; text-align: center;">Day 1</h1>
         <p><span style="color: #fff;font-size: 1.2vw; white-space: nowrap;
            text-overflow: ellipsis; width:95%; text-align: center;">This is the sub</span></p>
      </div>
   </div>
   <div class="plan-meal" style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')">
      <div>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Mon, 21. Nov</p>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Eat</p>
         <h1 style="color: #fff;font-size: 1.5vw;line-height: 1.6vw;white-space: nowrap;
            text-overflow: ellipsis; width:100%; text-align: center;">Day 1</h1>
         <p><span style="color: #fff;font-size: 1.2vw; white-space: nowrap;
            text-overflow: ellipsis; width:95%; text-align: center;">This is the sub</span></p>
      </div>
   </div>
   <div class="plan-meal" style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')">
      <div>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Mon, 21. Nov</p>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Eat</p>
         <h1 style="color: #fff;font-size: 1.5vw;line-height: 1.6vw;white-space: nowrap;
            text-overflow: ellipsis; width:100%; text-align: center;">Day 1</h1>
         <p><span style="color: #fff;font-size: 1.2vw; white-space: nowrap;
            text-overflow: ellipsis; width:95%; text-align: center;">This is the sub</span></p>
      </div>
   </div>
   <div class="plan-meal" style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')">
      <div>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Mon, 21. Nov</p>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Eat</p>
         <h1 style="color: #fff;font-size: 1.5vw;line-height: 1.6vw;white-space: nowrap;
            text-overflow: ellipsis; width:100%; text-align: center;">Day 1</h1>
         <p><span style="color: #fff;font-size: 1.2vw; white-space: nowrap;
            text-overflow: ellipsis; width:95%; text-align: center;">This is the sub</span></p>
      </div>
   </div>
   <div class="plan-meal" style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')">
      <div>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Mon, 21. Nov</p>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Eat</p>
         <h1 style="color: #fff;font-size: 1.5vw;line-height: 1.6vw;white-space: nowrap;
            text-overflow: ellipsis; width:100%; text-align: center;">Day 1</h1>
         <p><span style="color: #fff;font-size: 1.2vw; white-space: nowrap;
            text-overflow: ellipsis; width:95%; text-align: center;">This is the sub</span></p>
      </div>
   </div>
   <div class="plan-meal" style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')">
      <div>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Mon, 21. Nov</p>
         <p style="color: #fff;font-size: 0.85vw;align-items: flex-end;">Eat</p>
         <h1 style="color: #fff;font-size: 1.5vw;line-height: 1.6vw;white-space: nowrap;
            text-overflow: ellipsis; width:100%; text-align: center;">Day 1</h1>
         <p><span style="color: #fff;font-size: 1.2vw; white-space: nowrap;
            text-overflow: ellipsis; width:95%; text-align: center;">This is the sub</span></p>
      </div>
   </div>
</div>

如有任何关于我所做更改的问题，请随时提出。

CSS 网格中的每周计划

Weekly Schedule in CSS grid

html

css

grid