+ Ответить в теме
Показано с 1 по 2 из 2

Тема: CSS GRID Нужна помощь

  1. #1
    Новичок Layman на пути к лучшему Аватар для Layman
    Регистрация
    30.04.2018
    Сообщений
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Вопрос CSS GRID Нужна помощь

    Здравствуйте уважаемые пользователи.
    Недавно начал знакомиться с GRID и что- пошло не так.

    Когда пытаюсь добавить два блока сверху, то начинают крушиться остальные.
    Два блока сверху нужно чтоб выглядели так

    блок1|блок1 |блок1|блок 2

      <div class="wrapper">


    <div class="statone holder"><p> test</p>
    <div class="block"><p>Тест тест</p></div>
    </div>
    <div class="stattwo holder"><p title="Этот текст будет показан при наведении">Просто текст</p>
    <div class="block"><p>Тест тест</p></div></div>
    <div class="statthree holder">3<p> test</p>
    <div class="block"><p>Тест тест</p></div></div>



    <div class="statoneb holder">1<p> test</p>
    <div class="block"><p>Тест тест</p></div></div>
    <div class="stattwob holder">2<p> test</p>
    <div class="block"><p>Тест тест</p></div></div>
    <div class="statthreeb holder">3<p> test</p>
    <div class="block"><p>Тест тест</p></div></div>
    <div class="statthreeb holder">3<p> test</p>
    <div class="block"><p>Тест тест</p></div></div>
    <!-- третья колонка -->
    <div class="statonec holder">1<p> test</p>
    <div class="block"><p>Тест тест</p></div></div>
    <div class="statthreec holder"><br><h1>Заголовк</h1></p>
    <div class="block"><p>Тест тест</p></div>
    </div>
    <!-- 4я колонка из 4 -->
    <div class="statone holder"><p> test</p>
    <div class="block"><p>Тест тест</p></div>
    </div>
    <div class="stattwo holder"><p>Просто текст</p>
    <div class="block"><p>Тест тест</p></div></div>
    <div class="statone4row holder"><p> test</p>
    <div class="block"><p>Тест тест</p></div>
    </div>
    <div class="stattwo4row holder"><p>Просто текст</p>
    <div class="block"><p>Тест тест</p></div></div>
    <!-- dva bloka -->
    <div class="statonec holder">1<p> test</p>
    <div class="block"><p>Тест тест</p></div></div>
    <div class="statthreec holder"><br><h1>Заголовк</h1></p>
    <div class="block"><p>Тест тест</p></div>
    </div>
    <!-- dva bannera-->
    <div class="banner holder">1<p> test</p>
    <div class="block"><p>Тест тест</p></div></div>
    <div class="banner2 holder"><br><h1>Заголовк</h1></p>
    <div class="block"><p>Тест тест</p></div>
    </div>
    <!-- botto -->
    <div class="bottom holder">1<p> test</p>
    <div class="block"><p>Тест тест</p></div></div>

    </div>






    p{
    text-align: center;
    margin: auto;
    padding-top: 12%;
    color: white;
    text-shadow: grey;
    }

    h1{
    vertical-align: bottom;
    text-align: center;
    padding-right: 20px;
    color: white;
    }

    .statone {
    background: green;
    }
    .stattwo {
    background: yellow;
    }
    .statthree {
    background: grey;
    }

    .statoneb {
    background: red;
    }
    .stattwob {
    background: yellow;
    }
    .statthreeb {
    background: grey;
    }


    .statonec {
    background: red;
    height: 200px;
    }
    .stattwoc {
    background: yellow;
    height: 200px;
    }
    .statthreec {
    background: grey;
    height: 200px;
    }




    .wrapper {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 200px 200px 200px;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    max-width: 1370px;
    width: 90%;
    margin: auto;
    }


    .bannerr {
    grid-column-start: 1;
    grid-column-end: 4;
    height: 120px;
    background: blue;
    }


    .bannerr2 {
    grid-column-start: 4;
    grid-column-end: 5;
    height: 120px;
    background: green;
    }



    .statone {
    grid-column-start: 1;
    grid-column-end: 2;
    }

    .stattwo {
    grid-column-start: 2;
    grid-column-end: 3;
    }

    .statthree {
    grid-column-start: 3;
    grid-column-end: 5;
    }

    .statoneb {
    grid-row-start: 2;
    grid-row-end: 4;
    }

    .stattwob {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 4;
    }

    .statthreeb {
    grid-column-start: 4;
    grid-column-end: 5;
    }
    .statonec {
    grid-column-start: 1;
    grid-column-end: 3;
    }


    .statthreec {
    grid-column-start: 3;
    grid-column-end: 5;
    }

    .statone4row{
    grid-column-start: 3;
    grid-column-end: 4;
    height: 200px;
    background: palegreen;

    }
    .stattwo4row{
    grid-column-start: 4;
    grid-column-end: 5;
    height: 200px;
    background: rebeccapurple;
    }

    .banner {
    grid-column-start: 1;
    grid-column-end: 3;
    height: 120px;
    background: blue;
    }


    .banner2 {
    grid-column-start: 3;
    grid-column-end: 5;
    height: 120px;
    background: green;
    }
    .bottom {
    grid-column-start:1;
    grid-column-end: 5;
    height: 400px;
    background: green;
    }





    для блоков сверху пытался встроить так:
       <div class="bannerr holder" id="ads"><a href="#"><h3>&nbsp;Реклама&nbsp;</h3></a>
    <div class="block"><p>Тест тест</p></div></div>

    <div class="bannerr2"><a href="#"><h3>&nbsp;Реклама&nbsp;</h3></a>
    <div class="block"><p>Тест тест</p></div>
    </div>

  2. #2
    Новичок Layman на пути к лучшему Аватар для Layman
    Регистрация
    30.04.2018
    Сообщений
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Я хочу добавить два блока сверху, вроде не должно было быть проблем, но когда добавляю сам блок начинается разваливаться. Весь код представлен.


+ Ответить в теме

Похожие темы

  1. Нужна помощь!
    от Зака в разделе Помогите!
    Ответов: 2
    Последнее сообщение: 11.04.2013, 16:31
  2. Нужна помощь
    от Krasherr в разделе PHP
    Ответов: 0
    Последнее сообщение: 10.04.2012, 17:15
  3. Нужна помощь
    от kpoxa555 в разделе HTML
    Ответов: 2
    Последнее сообщение: 22.03.2012, 20:40
  4. нужна помощь
    от Kejtrine в разделе Помогите!
    Ответов: 4
    Последнее сообщение: 01.12.2009, 17:45

Метки этой темы

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения