Как лучше делать сетку, если не использовать сетку от бустрапа?

Question

[Kris125]

Верстаю свой первый сайт. Изначально думала использовать бутстрап сетки, но опытные люди посоветовали сперва без них. Посоветовали создать контейнер, с помощью него сетку создать и уже по ней распределять. Но если честно я не поняла, как это делается. Если кто может подсказать, как это делается, была бы очень благодарна. Желательно на примере, допустим стандартные блок из 4 услуг: 1.. 2.. .3.. 4..

Comments

[Ярослав Иванов]

Если это первый сайт берете и верстаете. Сетка не нужна.

Answer 1

[Владислав Лысков]

создаешь блок и задаешь ему ширину в процентах, допустим в строке 4 блока (20% 20% 30% 30%), каждому даешь float left(что хуже), или display inline-block (что лучше), вуаля, сетка готова

Comments

[Kris125]

и во внутрь каждого дива с процентной шириной уже вставляем блоки так?

Answer 2

[Lander]

Посмотрите как это сделано, например в Skeleton Boilerplate. Кода мало... быстро разберетесь.

Comments

[Kris125]

насколько я понимаю это тоже что-то типа фреймворка? я хочу первый макет без всяких палочек-выручалочек сверстать :)

[Lander]

Kris125: Верстайте ради Будды. Но вы спрашиваете как сделать сетку. Вам тут в лучшем случае приведут пару примеров, а развернутый ответ уже по объёму будет приближаться к этому фреймворку. Зачем напрягать людей, когда можно просто посмотреть сразу туда в код. И по аналогии сделайте свою сетку. :)

[Kris125]

Lander: не напрягайтесь, вас не заставляют

[Lander]

Kris125: Женщины...

[Lander]

Kris125: Как то вот так

.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

Answer 3

[AlexandrBirukov]

флексы - один раз разобраться и можно не пользоваться больше никакими сетками, кроме того на флексах очень просто делать адаптив

Comments

[Kris125]

к сожалению флексы пока далеко не все браузеры поддерживают

[AlexandrBirukov]

Kris125: какие не поддерживают?

[Kris125]

AlexandrBirukov: старые :)

[Ksider]

Kris125: далеко не все это 97.61%

[AlexandrBirukov]

Kris125: короче можно сидеть в прошлом веке и пользоваться разными костыльными сетками, которые можно за три минуты самому на флексах сделать

[Kris125]

Ksider: не совсем поняла эту таблицу, 97% поддерживает?

[Kris125]

AlexandrBirukov: я с вами согласна, я против консерватизма, но вот заказчики как относятся к флексам?

[Ksider]

Kris125: да

[Kris125]

Ksider: а заказчики в целом не против использования флексов?

[Ksider]

Kris125: ну у них спрашивать надо, так то это их волновать не должно.

[AlexandrBirukov]

Kris125: заказчика, если заказчик конечно не другой программист со своими требованиями, как правило результат интересует, а не методы его реализации

[Kris125]

AlexandrBirukov: согласна, вообщем за флексами судя по всему будущее и стоит на них фокусировать внимание уже?

[AlexandrBirukov]

Kris125: по мне, так они очень много времени экономят, а время - деньги)

[Kris125]

AlexandrBirukov: а для опыта стоит сделать первые макеты на флоатах или таблицах? или это уже ненужный опыт будет?

[AlexandrBirukov]

Kris125: опыт наверное любой нужен будет, таблицы для размещения элементов на странице не видел чтоб использовали, если только очень очень давно так делали, использовать сетки типа бутстрапа или другие тоже неплохой вариант, флексы можно применять везде, не только для сетки, они очень удобны для адаптивной верстки

Answer 4

[Ksider]

гугл сразу туторила выдает
https://devcereal.com/make-your-own-responsive-css...

Comments

[Kris125]

не совсем поняла, что это?

[Ksider]

Kris125: это статья, про то как делаеться простоая сетка.

[Kris125]

Ksider: стоит оно того или лучше сразу на флексах делать?

[Ksider]

Kris125: на флексах тоже надо будет сетку делать.
По мне так проще чужую использовать, чем самому с нуля все писать.

вот сетка на флексах анпример flexboxgrid.com

[Ksider]

вот еще инструкцию нашел adamkaplan.me/grid

[Kris125]

Ksider: а стоит ли для практики первый макет сделать на флоатах или таблицах, имеется в виду это даст мне что-нибудь в будущем?

[Ksider]

Kris125: флоатs и таблицы никуда не денутся из css, для макетов их использовали за неимением ничего другого. Сейчас же по мимо флексов появился грид лайут.

[Kris125]

Ksider: а что это? я даже не слышала :)

[Ksider]

https://css-tricks.com/snippets/css/complete-guide...