中心文字到底部的网格区域

Question

我对HTML和CSS有点陌生，但我正在尝试学习网格。我有WPF的背景，该背景大量使用网格。它主要是简单的，但我对如何对齐该区域的底部感到困惑。

AccountBar.js

<div className={styles.container}>
    <img className={styles.avatar} style={{backgroundImage: `url(${profileURL})`}}></img>
    <text className={styles.username}>Username</text>
    <text className={styles.discriminator}>#1337</text>
</div>

style.module.css

.container {
    display: grid;
    grid-template-areas:
    'avatar username'
    'avatar discriminator';
}

.avatar {
    grid-area: avatar;
    background-image: url('https://tenor.com/view/pigeon-pidgeon-fire-eyes-burn-gif-24781901.gif');
    background-size: cover;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    border: 3px solid #591496;
}

.username {
    grid-area: username;
    color: white;
}

.discriminator {
    grid-area: discriminator;
    color: white;
}

结果看起来像是如此，但是我试图将“用户名”与单元的底部保持一致。

Answer 1

我认为您的问题不是来自网格，而是来自元素对齐。您可以添加保证金 - top：auto; （添加顶部边距以覆盖所有上空空间并将您的文本推到底部） .username ，这将帮助您完成诡计。

.container {
  display: grid;
  grid-template-areas:
    'avatar username'
    'avatar discriminator';
  background-color: #ccc; /*For testing*/
}

.avatar {
  grid-area: avatar;
  background-image: url('https://tenor.com/view/pigeon-pidgeon-fire-eyes-burn-gif-24781901.gif');
  background-size: cover;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  border: 3px solid #591496;
}

.username {
  grid-area: username;
  color: white;
  margin-top: auto; /*The change is here*/
}

.discriminator {
  grid-area: discriminator;
  color: white;
}

<div class="container">
    <img class="avatar" style="background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg');"/>
    <text class="username">Username</text>
    <text class="discriminator">#1337</text>
</div>

Answer 2

这里的一些解决方案：

简单的解决方案：

因为您正在使用 display：grid set align-fell：flex-end in .username

.container {
  display: grid;
  grid-template-areas: 'avatar username' 'avatar discriminator';
  background: gray
}

.avatar {
  grid-area: avatar;
  background-image: url('https://tenor.com/view/pigeon-pidgeon-fire-eyes-burn-gif-24781901.gif');
  background-size: cover;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  border: 3px solid #591496;
}

.username {
  grid-area: username;
  color: white;
  align-self: flex-end
}

.discriminator {
  grid-area: discriminator;
  color: white;
}

<div class="container">
  <img class="avatar" src="https://tenor.com/view/pigeon-pidgeon-fire-eyes-burn-gif-24781901.gif">
  <text class="username">Username</text>
  <text class="discriminator">#1337</text>
</div>

SET 保证金顶：auto in .username

.container {
  display: grid;
  grid-template-areas: 'avatar username' 'avatar discriminator';
  background: gray
}

.avatar {
  grid-area: avatar;
  background-image: url('https://tenor.com/view/pigeon-pidgeon-fire-eyes-burn-gif-24781901.gif');
  background-size: cover;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  border: 3px solid #591496;
}

.username {
  grid-area: username;
  color: white;
  margin-top: auto
}

.discriminator {
  grid-area: discriminator;
  color: white;
}

<div class="container">
  <img class="avatar" src="https://tenor.com/view/pigeon-pidgeon-fire-eyes-burn-gif-24781901.gif">
  <text class="username">Username</text>
  <text class="discriminator">#1337</text>
</div>

---

复杂的（不一定需要使用这些）

使用显示：网格 and 对齐content：flex-end in .username

.container {
  display: grid;
  grid-template-areas: 'avatar username' 'avatar discriminator';
  background: gray
}

.avatar {
  grid-area: avatar;
  background-image: url('https://tenor.com/view/pigeon-pidgeon-fire-eyes-burn-gif-24781901.gif');
  background-size: cover;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  border: 3px solid #591496;
}

.username {
  grid-area: username;
  color: white;
  display: grid;
  align-content: flex-end
}

.discriminator {
  grid-area: discriminator;
  color: white;
}

<div class="container">
  <img class="avatar" src="https://tenor.com/view/pigeon-pidgeon-fire-eyes-burn-gif-24781901.gif">
  <text class="username">Username</text>
  <text class="discriminator">#1337</text>
</div>

使用显示：Flex; flex方向：列 and 合理 - 符合：flex-end in .username in

.container {
  display: grid;
  grid-template-areas: 'avatar username' 'avatar discriminator';
  background: gray
}

.avatar {
  grid-area: avatar;
  background-image: url('https://tenor.com/view/pigeon-pidgeon-fire-eyes-burn-gif-24781901.gif');
  background-size: cover;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  border: 3px solid #591496;
}

.username {
  grid-area: username;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}

.discriminator {
  grid-area: discriminator;
  color: white;
}

<div class="container">
  <img class="avatar" src="https://tenor.com/view/pigeon-pidgeon-fire-eyes-burn-gif-24781901.gif">
  <text class="username">Username</text>
  <text class="discriminator">#1337</text>
</div>