Question

我正在开始Web开发。我在将Twitter，Facebook，嵌入YouTube等的时间线放置在网格区域中的另一个下方时遇到问题。由于某种原因，它们彼此相邻放置。

.caja{
    display: grid;

    grid-gap: 20px;
    grid-template-columns: 1fr 4fr 4fr 3fr 1fr;

    grid-template-rows: 1fr repeat(4,6fr) 1.5fr;
    grid-auto-flow: row;


}
.caja .redes{
    grid-row: span 3;
    background: yellow;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

<div class="caja">
<div class ="redes">
                <a class="twitter-timeline" data-width="100%" data-height="600px" data-theme="dark" href="https://twitter.com/arkfgo?ref_src=twsrc%5Etfw">Tweets by arkfgo</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

                <iframe width="560" height="315" src="https://www.youtube.com/embed/9YffrCViTVk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
            </div>
</div>

Answer 1

如果要正确使用网格，则需要将网格内部拆分为div。完成之后，您可以创建单独的行和列。我在下面做了一个例子

    .caja{
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 4fr 4fr 3fr 1fr;
  grid-template-rows: 1fr repeat(4,6fr) 1.5fr;
  grid-auto-flow: row;


}
.caja .redes{
  grid-row: span 3;
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  grid-column-start: 1;
  grid-column-end: 1;
}

    <div class="caja">
    <div class ="redes">
                    <a class="twitter-timeline" data-width="100%" data-height="600px" data-theme="dark" href="https://twitter.com/arkfgo?ref_src=twsrc%5Etfw">Tweets by arkfgo</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class ="redes">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/9YffrCViTVk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
    </div>

您可以在此阅读有关网格布局的更多信息

https://www.w3schools.com/css/css_grid.asp

网格区域中多个项目的对齐

1 个答案: