CSS Grid教程第17集 - 引入自定义属性(Custom Properties)

Поделиться
HTML-код
  • Опубликовано: 18 сен 2024
  • 当我们网格布局需要根据不同的视口宽度(breakpoint)进行调整时，即在不同的媒体查询(media query)下使用不同的grid-template-columns和grid-template-rows，那么结合CSS的自定义属性(Custom Properties)可以使我们的网格布局更容易维护。

Комментарии • 3

  • @qumeiit9889
    @qumeiit9889 Год назад +1

    这集很赞！

  • @qumeiit9889
    @qumeiit9889 Год назад +1

    是不是直接用 fit + minmax 也可以实现

    • @heybran_
      @heybran_  Год назад +1

      不确定了，不过你可以在codepen试一下

Следующие
Автовоспроизведение
CSS Grid教程第18集 - 学习slack.com网格布局11:00CSS Grid教程第18集 - 学习slack.com网格布局
CSS Grid教程第18集 - 学习slack.com网格布局Brandon Zhang
Просмотров 100
No, Einstein Didn’t Solve the Biggest Problem in Physics8:04No, Einstein Didn’t Solve the Biggest Problem in Physics
No, Einstein Didn’t Solve the Biggest Problem in PhysicsSabine Hossenfelder
Просмотров 237 тыс.
Helix Editor: match模式mi, ma键位5:07Helix Editor: match模式mi, ma键位
Helix Editor: match模式mi, ma键位Brandon Zhang
Просмотров 901
Talk Series: 76th Emmy Awards06:26Talk Series: 76th Emmy Awards
Talk Series: 76th Emmy AwardsTelevision Academy
Просмотров 490 тыс.
"I'm The Best Fighter In The World!"- Canelo Alvarez & Edgar Berlanga Post-Fight06:48"I'm The Best Fighter In The World!"- Canelo Alvarez & Edgar Berlanga Post-Fight
"I'm The Best Fighter In The World!"- Canelo Alvarez & Edgar Berlanga Post-FightMatchroom Boxing
Просмотров 699 тыс.
Next Life (Sped Up)02:10Next Life (Sped Up)
Next Life (Sped Up)Allison Kane - Topic
Просмотров 69 тыс.
I Found a Giant NVIDIA PC40:02I Found a Giant NVIDIA PC
I Found a Giant NVIDIA PCBringus Studios
Просмотров 572 тыс.
EVERYTHING you need to know about client loaders (ft. react-query)27:19EVERYTHING you need to know about client loaders (ft. react-query)
EVERYTHING you need to know about client loaders (ft. react-query)Alem Tuzlak
Просмотров 2,4 тыс.
Helix编辑器配置GO语言LSP3:21Helix编辑器配置GO语言LSP
Helix编辑器配置GO语言LSPBrandon Zhang
Просмотров 866
讓獨棟透天厝網路無死角！TP-Link Deco BE65 Wi Fi7 Mesh路由器開箱測試《阿倫來介紹》16:42讓獨棟透天厝網路無死角！TP-Link Deco BE65 Wi Fi7 Mesh路由器開箱測試《阿倫來介紹》
讓獨棟透天厝網路無死角！TP-Link Deco BE65 Wi Fi7 Mesh路由器開箱測試《阿倫來介紹》Alan Channel / 阿倫頻道
Просмотров 2,7 тыс.
iPhone 16/16 Pro Review: A18 is Actually Good!22:13iPhone 16/16 Pro Review: A18 is Actually Good!
iPhone 16/16 Pro Review: A18 is Actually Good!极客湾Geekerwan
Просмотров 184 тыс.
特斯拉重大更新，你收到了吗？3:51特斯拉重大更新，你收到了吗？
特斯拉重大更新，你收到了吗？如先生的频道
Просмотров 585
|| Alpha Best Build 2024 || Alpha Best Build Top 1 Global ||13:13|| Alpha Best Build 2024 || Alpha Best Build Top 1 Global ||
|| Alpha Best Build 2024 || Alpha Best Build Top 1 Global ||Crazy Gamer
Просмотров 21
AirPods 4 Review: Strongest Competitor to the AirPods Pro 211:47AirPods 4 Review: Strongest Competitor to the AirPods Pro 2
AirPods 4 Review: Strongest Competitor to the AirPods Pro 2钟文泽
Просмотров 236 тыс.
最PRO的運動相機！DJI Action 5 Pro 再度升級登場！13.5檔動態範圍 / AI超級夜景 / 電量史上最大 【器材老實說】#DJIAction5Pro #運動相機12:21最PRO的運動相機！DJI Action 5 Pro 再度升級登場！13.5檔動態範圍 / AI超級夜景 / 電量史上最大 【器材老實說】#DJIAction5Pro #運動相機
最PRO的運動相機！DJI Action 5 Pro 再度升級登場！13.5檔動態範圍 / AI超級夜景 / 電量史上最大 【器材老實說】#DJIAction5Pro #運動相機興趣使然的攝影師 Enzo
Просмотров 2,1 тыс.
Рассвет, надежды и успехи. Империя без автомобилей. Эпизод I1:15:07Рассвет, надежды и успехи. Империя без автомобилей. Эпизод I
Рассвет, надежды и успехи. Империя без автомобилей. Эпизод IАсафьев Стас
Просмотров 935 тыс.
Обязательно запомни эту хитрость! Как легко снять пластиковый хомут, не повредив его? #shorts00:11Обязательно запомни эту хитрость! Как легко снять пластиковый хомут, не повредив его? #shorts
Обязательно запомни эту хитрость! Как легко снять пластиковый хомут, не повредив его? #shortsПоделкин
Просмотров 94 тыс.
Шокирующие Предсказания Симпсонов на 2024 год14:42Шокирующие Предсказания Симпсонов на 2024 год
Шокирующие Предсказания Симпсонов на 2024 годПАНКЕЙК
Просмотров 70 тыс.
Chill Out! 🍧 How to Make Watermelon DIY Ice Cream - A Refreshing Treat!00:28Chill Out! 🍧 How to Make Watermelon DIY Ice Cream - A Refreshing Treat!
Chill Out! 🍧 How to Make Watermelon DIY Ice Cream - A Refreshing Treat!Look at Rey
Просмотров 1,4 млн
Nyusha / Нюша - Сильные девочки | НОВАЯ ПЕСНЯ00:13Nyusha / Нюша - Сильные девочки | НОВАЯ ПЕСНЯ
Nyusha / Нюша - Сильные девочки | НОВАЯ ПЕСНЯNyu Live
Просмотров 53 тыс.
Қисми пурраи Милитсия хабар медиҳад №17 17.09.202421:55Қисми пурраи Милитсия хабар медиҳад №17 17.09.2024
Қисми пурраи Милитсия хабар медиҳад №17 17.09.2024Пайки Сугд
Просмотров 210 тыс.
ПРОГНОЗ ТАРО на ЛУННОЕ ЗАТМЕНИЕ 17-18 СЕНТЯБРЯ 2024 года для всех ЗНАКОВ ЗОДИАКА от ANGELA PEARL30:07ПРОГНОЗ ТАРО на ЛУННОЕ ЗАТМЕНИЕ 17-18 СЕНТЯБРЯ 2024 года для всех ЗНАКОВ ЗОДИАКА от ANGELA PEARL
ПРОГНОЗ ТАРО на ЛУННОЕ ЗАТМЕНИЕ 17-18 СЕНТЯБРЯ 2024 года для всех ЗНАКОВ ЗОДИАКА от ANGELA PEARLAngela Pearl
Просмотров 477 тыс.
Aka 2-qism (milliy serial) | Ака 2-кисм (миллий сериал)42:29Aka 2-qism (milliy serial) | Ака 2-кисм (миллий сериал)
Aka 2-qism (milliy serial) | Ака 2-кисм (миллий сериал)Xon Films
Просмотров 260 тыс.