html - CSS 网格项定位，其中项 1 位于网格列的下端，项 2 位于其列的中心

Question

我正在尝试使用 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>

这段代码完成了这项工作，但它不适用于媒体查询。我是初学者，让我知道我需要做哪些改变，或者我应该遵循什么方法来实现我的目标。

标签： htmlcssflexboxcss-gridpositioning

Answer 1

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

恕我直言，在使用网格或 flex 构建布局时，浮动或绝对不应该有任何用处。

例子：

.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, 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>