№ 053: Адаптивні стовпці для галереї - CSS-хитрощі

Зміст

Ми додаємо певної реакції на сітку, яку ми створили для Галереї. На найширших екранах ми маємо це чотири стовпці. Потім ми починаємо додавати точки зупинку за допомогою нашого надзвичайно простого @mixins, який ми створили та повторно використовували.

У нашій точці зупинки мама-ведмідь опускаємося до 3 колонок, потім робимо проміжну точку зупинки між ведмедем-ведмедиком та ведмедиком, де вона розпадається на 2 колонки, а в кінцевому підсумку 1 колонка біля ведмедика. Це надзвичайно просто, оскільки все, що нам потрібно зробити, це налаштувати кількість стовпців, які ми встановили за допомогою CSS3 column-count.

Завершуємо відео, розповідаючи про майбутні цілі для галереї. Було б непогано мати можливість завантажувати різну кількість зображень на різні розміри екрану та використовувати фактичні ескізи замість повнорозмірних зображень. Можливо, одного разу ми туди дійдемо.

Для запису, програмне забезпечення, яке я використовую локально для зйомки знімків екрану та завантаження їх на сервер через FTP, - LittleSnapper.

Цікаві статті...