Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
zuluss
20 / 20 / 8
Регистрация: 23.12.2015
Сообщений: 96
1

Css grid

11.01.2018, 02:14. Просмотров 124. Ответов 0
Метки нет (Все метки)

подскажите как в сss grid реализовать пропорциональное уменьшение блоков

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="wrapper">
  <div class="one">
  
         <div class="box-caption">1 <a href=""><h2>1</h2></a>
            <a class="btn btn-default" href="">Подробнее</a>
   </div>
</div>
  
  <div class="two">
    <img class="img-responsive" src="" alt="">
      <div class="box-caption">
         <a href=""><h2>2</h2></a>
            <a class="btn btn-default" href="">Подробнее</a>
   </div>
  </div>
  
  <div class="three">
    <img class="img-responsive" src="" alt="">
         <div class="box-caption">
         <a href=""><h2>3</h2></a>
            <a class="btn btn-default" href="">Подробнее</a>
   </div>
  </div>
  
  <div class="four">
    <img class="img-responsive" src="" alt="">
     <div class="box-caption">
         <a href=""><h2>4</h2></a>
            <a class="btn btn-default" href="">Подробнее</a>
   </div>
  </div>
  
  <div class="five">
    <img class="img-responsive" src="" alt="">
         <div class="box-caption">
         <a href=""><h2>5</h2></a>
            <a class="btn btn-default" href="">Подробнее</a>
   </div>
  </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  align-items: stretch;
 
}
.one {
  grid-column: 1 / 3;
  grid-row: 1/3;
  background-color: #111;
   background-image: url(http://test.magaz.pp.ua/image/catalog/banner/cat-1.jpg)
;
background-size: cover;
  
}
.two { 
  grid-column: 3 / 5;
  grid-row: 1;
  background-color: #444;
   background-image: url(http://test.magaz.pp.ua/image/catalog/banner/cat-1.jpg)
;
background-size: cover;
}
.three {
 grid-column: 5 / 7;
  grid-row:1 ;
  background-color: #666;
  background-image: url(http://test.magaz.pp.ua/image/catalog/banner/cat-1.jpg)
;
background-size: cover;
}
.four {
  grid-column: 3/5;
  grid-row: 2;
   background-color: #444;
    background-image: url(http://test.magaz.pp.ua/image/catalog/banner/cat-1.jpg)
;
background-size: cover;
}
.five {
  grid-column: 5/7;
  grid-row: 2;
   background-color: #888;
    background-image: url(http://test.magaz.pp.ua/image/catalog/banner/cat-1.jpg)
;
background-size: cover;
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.01.2018, 02:14
Ответы с готовыми решениями:

CSS Grid
Господа, у меня возникла проблема с css grid :( Кто знает эту технологию и кому несложно помочь,...

CSS Grid
Добрый вечер. Пытаюсь сделать аналогичный скриншоту эффект. Если правильно понял, смотреть надо в...

CSS Grid Layout
Используете ли этот подход? Какие подводные камни вы обнаружили? ( у меня почему то в Мозиле...

Позиционирование элементов CSS Grid
Создал блок, display:grid. По задумке первый элемент должен растянуться на 2 колонки и 2 ряда,...

Адаптивная вёрстка: CSS Grid vs Flex
Доброго времени суток, коллеги! По воле судьбы осваиваю новую профессию - верстальщик. Попробовал...

0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
11.01.2018, 02:14

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

Как сделать адаптивную вёрстку на CSS Grid
Здравствуйте. Я новичок в веб-разработке. Совсем недавно начал изучать grid. Очень много времени...

CSS grid как сделать разную высоту у элементов в ряду?
Я хочу чтобы высота первого блока (sidebar) была минимум 10 пикселей, а если в нём контента больше...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru