Выравнивание нескольких элементов в области сетки

Question

Я начинаю в веб-разработке.У меня проблема с тем, что я хочу разместить временную шкалу в твиттере, фейсбуке, встраивать 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