Адаптация блоков, чередование текст, картинка, при адаптации выглядит не красиво, как поправить?

Question

[Антон Вебсайтовский]

Для вытягивания во всю длину сайта 6 блоков в линию я использую.

width: -webkit-calc(100% / 6);
width: -o-calc(100% / 6);
width: calc(100% / 6);

Блоки идут так, фон и там текст, потом фото, такое чередование.
Выглядит это так.


Когда происходит адаптация при определенном разрешении экрана, я ставлю 4 блока вместо 6.
Выглядит это так.


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

Рабочий пример тут:
https://codepen.io/AXOT/pen/dyjJqEQ

Answer 1

[Сергей delphinpro]

Вы что курили, когда такие имена классов придумывали? Мне отсыпьте.

Comments

[Антон Вебсайтовский]

а я ни когда не выдумываю особо ), пишу что угодно в плане классов, для меня нет смысла в имени ! я и так понимаю, что смотрю.

Понял, переписал на грид. в своем примере. ну и поделил блоки чуть по другому, теперь 1 блок, это 2 блока.
Грид только начал щупать ), по этому еще изучаю.
Спасибо, работает.

Объясните мне суть этого:

.card:nth-child(4n + 4),
  .card:nth-child(4n + 3) {
    flex-direction: row-reverse;
  }

[Антон Вебсайтовский]

Уже прочитал (Этот же принцип применим ко всем другим значениям flex-direction, показанных ниже. Значение row-reverse. Вы можете использовать flex-direction: row-reverse, чтобы элементы в ряду отображались в обратном порядке.)

Хорошая штука, тож новое для меня.
Можно было и так поменять местами еще flex: 1;

[Сергей delphinpro]

Антон Вебсайтовский,

для меня нет смысла в имени ! я и так понимаю, что смотрю.

Сейчас понимаете. Через полгода в своём же коде понимать не будете. Исходный код пишется для программиста, а не для компьютера.

[Антон Вебсайтовский]

Сергей delphinpro, давно так пишу. Уровень позволяет понимать и без описания класса.
Зачастую я применяю типа так, .m77, это маргин 70px верх, 70px вниз, или p60, padding 60 0 0 0.
Бывает так все где спереди v, верх начало сайта, все где c, центр, ну и b. это где первая буква, но так не везде. Ну или glnews, gl главная, стили для новостей которые вывожу на главной.

Ни когда не вникал что написано, логично когда я что-то ищу, то я знаю что, то я знаю название класса уже, в брайзере можно смотреть на элемент, правой кнопкой мыши, какие классы у элемента, и уже находишь в css, и все.
Я вообще ни когда не вчитывался, что там за название класса и о чем оно говорит ), я сразу лез ближе к делу, смотрел стили.

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

Ни разу имя класса мне не пригодилось и не помогло в чем-то.
Когда видишь код, нашел нужные блоки, то без названия классов, понимаешь, что тут и к чему.
Я пришел к этому пониманию с опытом. Так что я считаю так, для кого важное название класса, тот еще не дошел до этого уровня. Это не говорит об его знаниях, он может и много знать, когда много работаешь, то понимаешь как можно быстрее понимать и разбирать что либо и приходишь к более короткому пути. Бывает делает такое, что описать можно в 15-30 символов, так зачем такой класс, все мы знаем, что поисковые системы любят когда когда меньше, а текста больше.

А что насчет более современной верстки, где можно классы почти не использовать, а ловить дивы и другие предметы через >div>a и т.д, nth-child, last-child и многое другое, я часто это использую и бывает что код выглядит так.

<div class="news">
  <div>
     <div>
        <h2>Заголовок</h2>
        <span>дата</span>
     </div>
     <div>
       <a href="" title="">
          <img src="" alt="" title="" />
        </a>
     </div>
  </div>
<a href="" title="">подробнее </a>
</div>

[Сергей delphinpro]

Антон Вебсайтовский,

Я пришел к этому пониманию с опытом. Так что я считаю так, для кого важное название класса, тот еще не дошел до этого уровня.

Извините, конечно, но https://ru.wikipedia.org/wiki/Эффект_Даннинга_—_Крюгера
Я убеждать ни в чем не буду, пишите, как нравится. Просто указал на немного неверный подход в написании кода.

[Антон Вебсайтовский]

Сергей delphinpro, вот тебе делать нечего, перечитай что я написал, проведи личный опыт, и поймешь, я пришел к этому сам, что название классов для меня не имеет значение, я не стал подробно разбирать и приводить примеры, чтобы было понятно. Хотя я выше привел пример, где можно использовать один класс, не пихать в дивы, и теги разные.

Вот это часть мне больше подходит, всегда считал, что я ничтожество и еще многое надо изучать и запоминать.

(Высококвалифицированные люди, наоборот, склонны занижать оценку своих способностей и страдать от недостаточной уверенности в своих силах, считая других более компетентными. Таким образом, менее компетентные люди в целом имеют более высокое мнение о собственных способностях, чем это свойственно людям компетентным (которые к тому же склонны предполагать, что окружающие оценивают их способности так же низко, как и они сами). Также обладатели высокого уровня квалификации ошибочно полагают, что задачи, лёгкие для них, так же легки и для других людей)