Как с помощью css grid позиционировать блоки?

0

Добрый день не понимаю как сделать чтобы примеру можно было вставить в блок ads в  колонку sidebar2 как было показно с первым sidebar

В начале я создал в html   новый блок, а потом уже вставил свойства в css. Как с  помощю  GRID позиционировать ads2 так же как и на видео позиционировали ads толькко что бы он был в колонке sidebar2

        <aside class="sidebar">SideBar</aside>
        <aside class="sidebar2">SideBar</aside>
        <aside class="ads">Ads</aside>
        <aside class="ads2">Ads</aside>
.sidebar {

    grid-area:sidebar;
    background-color: blue;
}
.sidebar2 {

    grid-area:sidebar2;
    background-color: blue;
}

.ads {
    grid-area:ads;
    background: yellow;
}

.ads2 {
    grid-area:ads2;
    background: yellow;

GRID : пробовал так и не выходит как надо..

   .wrapper {
    height: 100vh;
    display: grid; 
    grid-template-columns: 200PX auto 400px;
    grid-template-rows: 50px auto 500px 100px;
    grid-template-areas: 
        "header header header"
        "sidebar content sidebar2"
        "ads content sidebar2"
        "sidebar content ads2"
        "footer footer footer"; 
}

html
css

1 ответов

0

Вот так:

.wrapper {
    height: 100vh;
    display: grid; 
  
    grid-template-columns: 200PX auto 400px;
    grid-template-rows: 50px auto 500px 100px;
    grid-template-areas: 
        "header header header"
        "sidebar content sidebar2"
        "ads content ads2"
        "footer footer footer"; 
}
Sign up or Log in to write an answer