如何在CSS网格上锁定y的运动？

Question

我是html和CSS的新手，正在尝试制作类似Google的搜索栏。如果您在调整窗口大小时查看Google的主页，则搜索栏和徽标会随着X轴上的调整大小而移动，但它们会锁定在Y轴上。我该如何实现？这是我的代码：

.searchbar
{
display: grid;
height: 92.4vh;
border:1px solid green;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
}
#title
{
color: red;
font-family: 'PT Serif', serif;
font-size: 40px;
grid-row: 2;
grid-column: 2;
align-self: flex-end;
justify-self:center;
text-align: center;
}
#bar
{
grid-row: 3;
grid-column: 2;
justify-self:center;
}

HTML：

<body>
<main>
    <div class="searchbar">
        <div id="title">Title</div>
        <div id="bar"><input type="text" placeholder="Search"></div>
    </div>
</main>
</body>

这里是我想要的照片：

您可以看到窗口已调整大小，搜索栏和徽标位于X轴的中心，但它们仍保持在Y轴。

Answer 1

这是两种方法，我已经简化了使用flexbox而不是grid以及仅修改您拥有的网格代码所要求的内容。如果希望元素的位置保持在相同的Y坐标，则只需确保使用非高度相对单位。

由于搜索栏的高度基于视图高度（vh），并且您正在使用fr作为网格。 FR使用的可用空间的一部分取决于视图的高度。

Flexbox解决方案非常简单，因为您只需将它们对齐在一起，然后放入margin-top即可将其移至您希望其停留的Y位置。

修改代码以与网格一起使用，也非常简单。您只需要将行定义更改为类似的内容：grid-template-rows: 50px max-content max-content 1fr;使其始终在同一位置开始。然后您可以使用row-gap修改元素之间的间距。

.searchbar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 92.4vh;
  border: 1px solid green;
}

#title {
  margin-top: 50px;
  color: red;
  font-family: 'PT Serif', serif;
  font-size: 40px;
}

.searchbar-grid {
  display: grid;
  height: 92.4vh;
  border: 1px solid green;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 50px max-content max-content 1fr;
}

#title-grid {
  color: red;
  font-family: 'PT Serif', serif;
  font-size: 40px;
  grid-row: 2;
  grid-column: 2;
  align-self: flex-end;
  justify-self: center;
  text-align: center;
}

#bar-grid {
  grid-row: 3;
  grid-column: 2;
  justify-self: center;
}

<body>
  Flex
  <main>
    <div class="searchbar">
      <div id="title">Title</div>
      <div id="bar"><input type="text" placeholder="Search"></div>
    </div>
  </main>
  Grid
  <main>
    <div class="searchbar-grid">
      <div id="title-grid">Title</div>
      <div id="bar-grid"><input type="text" placeholder="Search"></div>
    </div>
  </main>
</body>

如何在CSS网格上锁定y的运动？

问题描述投票：0回答：1

1个回答

最新问题

如何在CSS网格上锁定y的运动？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1