Как создать HTML/CSS отзывчивую плитку?

Question

Я пытаюсь понять, как работает CSS и отзывчивый дизайн. Я сделал небольшой пример here.

Это простой шаблон для плитки.

Я хочу, чтобы у меня была возможность показать свою плитку на 2, 3, 4 или более столбцах. В этом примере вам просто нужно изменить класс «обертка» div c2, c3, c4, чтобы изменить количество столбцов.

Это работает, потому что моя плитка плавает влево, и эти c2, c3, c4 изменяют ширину моей обертки. См. HTML и CSS-файл или по адресу JSFiddle.

HTML

<div class="wrapper c2"> <!-- try with c3, c4--> 
    <div class="scrollable"> 
     <div class="webbutiles"> 
      <a href='?page_id=77' class='tile TBlue iconmain '><div class='boxContent'><i class='icon-group'></i></div><div class='tilename '><div class='name'>Tile 1</div></div></a> 
      <a href='?page_id=85' class='tile TDarkGreen iconmain '><div class='boxContent'><i class='icon-comments-alt'></i></div><div class='tilename '><div class='name'>Tile 2</div></div></a> 
      <a href='?page_id=89' class='tile TDarkPurple iconmain '><div class='boxContent'><i class='icon-cogs'></i></div><div class='tilename '><div class='name'>Tile 3</div></div></a> 
      <a href='?page_id=91' class='tile TDarkBlue iconmain '><div class='boxContent'><i class='icon-table'></i></div><div class='tilename '><div class='name'>Tile 4</div></div></a> 
      <a href='?page_id=93' class='tile TDarkRed iconmain '><div class='boxContent'><i class='icon-heart'></i></div><div class='tilename '><div class='name'>Tile 5</div></div></a> 
      <a href='?page_id=95' class='tile TTwitterBlue iconmain '><div class='boxContent'><i class='icon-twitter'></i></div><div class='tilename '><div class='name'>Tile 6</div></div></a> 
      <a href='?page_id=97' class='tile TGreen iconmain '><div class='boxContent'><i class='icon-columns'></i></div><div class='tilename '><div class='name'>Tile 7</div></div></a> 
      <a href='?page_id=87' class='tile TOrange t2x iconmain '><div class='boxContent'><i class='icon-reorder'></i></div><div class='tilename '><div class='name'>Tile Large</div></div></a> 
     </div> 
    </div> 
</div> 

CSS

/* General tile settings */ 
.tile{ display:block; float:left; background-color:#525252; width:150px; height:150px; cursor:pointer; text-decoration:none; color:#fff; overflow:hidden; position:relative; font-weight:300; font-size:11pt; letter-spacing:0.02em; line-height:20px; margin:0 10px 10px 0; overflow:hidden} 
.tile:hover{ outline:3px #3a3a3a solid} 


/* Tile responsive setting. */ 
@media (min-width:1025px){ 
    .wrapper{width:1024px} 
} 

.wrapper{margin-left:auto; margin-right:auto} 
.wrapper.c2{width:400px} 
.wrapper.c3{width:600px} 
.wrapper.c4{width:800px} 
.wrapper.c5{width:1000px} 
.resimgicon {max-width:62px;height:auto;} 
.tile .boxContent .resimgicon{ margin-left: 3em; margin-top: 2.7em;} 
.tile{ width:157px; height:157px} 
.tile.t2x{ width:324px} 
.tile.t2x .boxContent{ width:324px} 

@media (max-width:640px){ 
    .wrapper{margin-left:auto; margin-right:auto} 
    .wrapper.c2{width:324px} 
    .wrapper.c3{width:491px} 
    .wrapper.c4{width:658px} 
    .wrapper.c5{width:785px} 
    .resimgicon {max-width:64px;height:auto;} 
    .tile .boxContent .resimgicon{ margin-left: 2.7em; margin-top: 2.8em;} 
    .tile{ width:147px; height:147px} 
    .tile.t2x{ width:304px} 
    .tile.t2x .boxContent{ width:304px} 
} 

@media (max-width:360px){ 
    .wrapper{margin-left:auto; margin-right:auto} 
    .wrapper.c2{width:184px} 
    .wrapper.c3{width:281px} 
    .wrapper.c4{width:378px} 
    .wrapper.c5{width:435px} 
    .resimgicon {max-width:38px;height:auto;} 
    .tile .boxContent .resimgicon{ margin-left: .74em; margin-top: .68em;} 
    .tile{ width:77px; height:77px} 
    .tile.t2x{ width:164px} 
    .tile.t2x .boxContent{ width:164px} 
} 

мне не нравится этот CSS, потому что я не люблю работать с фиксированной плитки и обертки размера. Это создает левое и правое (авто) маргирование. Это не проблема для большого экрана, но это бесполезно на экране телефона или планшета.

Что я должен сделать, чтобы создать систему плитки с колонкой без фиксированной ширины обертки? Есть ли лучший способ создать такой вид плитки?

Answer 1

В некотором роде. Вы как бы делаете это в обратном направлении от того, как это делается везде.

Вместо того, чтобы изменять ширину обертки, вы хотите, чтобы обертка была текучей по ширине. то есть он может быть шириной 320 пикселей или шириной 2560 пикселей.

Затем ... задайте набор предварительно заданных ширины столбцов, рассчитанных в процентах, на основе сетки.

Предположим, вы хотите иметь ширину не более 12 колонок. Каждый набор столбцов, то должны быть равны в общей сложности 12

Тогда, например, если вы хотите полную ширину колонок, вы назвали бы этот класс «Col-12» и дать ему width: 100%;

Тогда, если вы хотите два столбцы, равные по ширине, например, с отметкой 3.8% между ними. Затем вы будете вычислять 100% - 3,8% = 96,2%, затем 96,2%/2 = 48,1%. Создайте класс под названием col-6, который имеет width: 48.1% и margin-right: 3.8%;. Затем создайте еще один класс под названием «последний». Этот класс применяется к последнему div в «строке» и имеет margin-right: 0;, чтобы сбросить ненужный правый край последний div.

полоскания и повторить с той же концепцией, выше, чтобы кол-1, Col-2, кол-3, и т.д.

Затем вы можете создать любую комбинацию, которую до тех пор, как классы добавляют до 12. Таким образом, col-6 и col-6, как указано выше, или, возможно, col-3, col-3, col-3, col-3. И если у вас есть причина для этого ... col-1, col-2, col-3, col-5, col-1 ...

Помогает ли это?