CSS网格项目定位，其中项目1停留在网格列的下端，而项目2停留在其列的中心

问题描述

我正在尝试使用CSS网格实现这一目标：

在主部分中具有两列的网格。左列中的项目是图像，并且必须粘贴到网格的底部，而卡将位于第二列中。卡将居中对齐。

这是我的HTML / CSS代码：

.mainbody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(1,2fr);
  text-align: center;
  grid-gap: 5px;
  padding-top: 75px;
}

.left {
  float: left;
  overflow: hidden;
  height: 600px;
  position: relative;
}

.left-bottom {
  position: absolute;
  bottom: 0px;
}

.right {
  float: left;
  width: 50%;
  overflow: hidden;
}

<div class="container mainbody">
  <div class="left">
    <div class="left-bottom">
      <img class="image-car" src="...">
    </div>
  </div>
  <div class="container">
    <div class="card">
      //card text
    </div>
  </div>
</div>

此代码可以完成此工作，但是在媒体查询中不起作用。我是一个初学者，请让我知道我需要做哪些更改，或者应该遵循哪种方法来实现自己的目标。

解决方法

您可以缩短CSS代码，并在网格单元内使用margin将内容推向任何边缘或中心。

恕我直言，浮动或绝对值在使用网格或弹性布局时是没有用的。

示例：

.mainbody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
  grid-gap: 5px;
  }

.left {
margin-top:auto;
}

<div class="container mainbody">
  <div class="left">
    <div class="left-bottom">
      <img class="image-car" src="http://dummyimage.com/100x150&text=1">
    </div>
  </div>
  <div class="container">
    <div class="card">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,feugiat vitae,ultricies eget,tempor sit amet,ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi,condimentum sed,commodo vitae,ornare sit amet,wisi. Aenean fermentum,elit eget tincidunt condimentum,eros ipsum rutrum orci,sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus,neque id cursus faucibus,tortor neque egestas augue,eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,tincidunt quis,accumsan porttitor,facilisis luctus,metus</p>
    </div>
  </div>
</div>

codepen可以和https://codepen.io/gc-nomade/pen/wvGXKKG

一起玩

来自您的评论：

那么，如何使一个网格项粘在底部，而另一个网格在中心呢？另外，是的，我想要上面链接中的grid_layout之类的东西

可能的方法

* {
  margin: auto;
}

.mainbody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
  grid-gap: 5px;
  min-height: 100vh;
  background: #bee
}

.container .container {
  display: grid; /* just a single cel to use layout properties */
}

.left {
  margin: auto auto 0;
}

.card {
  margin: auto 0 auto;
}

<div class="container mainbody">
  <div class="left">
    <div class="left-bottom">
      <img class="image-car" src="http://dummyimage.com/100x150&text=1">
    </div>
  </div>
  <div class="container">
    <div class="card">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi,sagittis
        tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus,accumsan
        porttitor,metus</p>
    </div>
  </div>
</div>