Grid

Flexbox vs Grid:基本概念

整个Web在不断的演进,那么为Web服务的理念与技术等等也在不断的进行演化。那么我们今天要聊的话题,Web布局中最为优秀的两种布局方式:Flexbox布局CSS Grid布局。有关于这两方面的知识,其实在W3cplus上已经有很多相关的内容。由于这两种布局方式对Web布局带来了很多改变,而且两者都有其自身的优势。正因为如此,很多同学总是会类似的一个问题:应该使用Flexbox还是Grid来进行布局?那么我们从这篇文章开始,将会分几篇文章一起来介绍Flexbox布局和CSS Grid布局两者的差异性?我们又应该如何的选择,才能更适合我们项目的布局?希望接下来的内容对大家有所帮助。

CSS Grid带来的新单位:分数单位fr

CSS Grid经过这么多年的发展已经越来越受人青眯了,到目前为止支持率得到近88%的比例。经过这么多年的跟踪和学习,对CSS Grid的特性也是略有所知,但还未达到完全的融汇贯通。因为它有很多的特性,而且这些特性对于CSSer来说很多都是新的概念,比如我们今天要说的分数单位fr就是一个新东东。那么这篇文章,咱们就来一起看看这个特性有什么特性,给我们又能带来什么好处。感兴趣的同学,请继续往下阅读。

构建一个计算器:UI界面设计

从这篇文章开始,将会花几篇文章的篇幅来介绍如何构建一个在线的计算器,将前面学习的一些知识串在一起,通过实战加强对理论知识的理解。实现计算器主要分为两个部分,一个是构建计算器的UI,另一个通过JavaScript实现计算器的功能。在完成这两个部分内容的学习,建议您需要对下面的几个知识点有所了解: 网格布局渐变

使用CSS Grid的九大误区

如果你和我一样一直在关注CSS Grid布局的话,你应该知道@Rachel Andrew和@Jen Simmons都是CSS Grid 布局的布道师。两位女士一直都在推进Grid的特性和完善相关的特性。这几天看到@Jen Simmons录了一个视频,聊了一下CSS Grid布局相关的误区。

CSS Grid Layout一些有趣的事情(2)

去年,我做了一个研讨会之后收集了一些关于CSS Grid布局有趣的东西。今天年,我在另一个工作室工作,我学到了一些更令人兴奋的事情,那就是我们都喜欢布局规范。当然,我不会把这些有趣的东西独享。我很高兴能和大家一起分享这些有趣的东西。

CSS Grid中的陷阱和绊脚石

2017年3月,CSS Grid在几个星期内就被发送到Chrome、Firefox和Safari的生产版本中。很高兴,大家可以使用它来解决实际问题。CSS Grid是一种不同的布局方式,在大家开始使用规范的时候,有很多常见的问题。这篇文章的目的是回答其中的一些问题,并且将会是Smashing Magazine中有关于CSS Grid一系列文章中的一篇。

网格项目的宽高比

之前,我们讲了宽高比盒子,谈到一个技巧,就是运用填充来随心所欲地调整一个元素的长宽比例。这个技巧并不是经常能用到的,因为修整一个元素的高度是自找麻烦,但也不是没有这种情况出现。要降低这一风险,有一种方法,那就是伪元素(Psuedo Element)策略,让伪元素顶住其上一层元素,撑起纵横比。但是如果元素里的内容将元素顶得更高,那元素也会变得更高,纵横比就完蛋了。

CSS Grid 布局揭秘

深入挖掘 CSS Grid 布局规范,发掘一些你可能不知道的特性,并探索即将到来的特性。CSS Grid 布局于 2017 年 3 月 开始被浏览器所支持,在撰写本文时,大多数网站有超过百分之70的访问者有 CSS Grid 特性支持。 这个数据还在快速增长中, 并且在 Edge 浏览器发布更新支持后继续改善。我希望你之前已经有时间去探索过 CSS Grid 布局的一些特性了。 这篇文章将带你探索一些你可能不知道的特性。 并且了解一下未来阶段中可能实现的规范。

CSS Grid和Flexbox解决实际的布局问题

就目前为止,CSS的Grid和Flexbox结合将是解决布局的最佳方案。虽然浏览器对CSS Grid和Flexbox的属性未完全支持,但对于实现布局而言,这已是一种非常完美的结合。如果CSS Box Alignment Module Level3能得到更好的支持的话,那么对于Web的布局将是一种福音。就前面学习的CSS GridCSS Flexbox,我们对CSS的Flexbox和Grid有了很深入的了解。特别是在《使用CSS Grid和Flexbox制作Card》一文中,已经见识到了CSS Grid和Flexbox结合对布局的巨大优势。那么这篇文章,将再一次向大家展现CSS Grid和Flexbox的强大之处。那是因为他们的结合将解决布局的实际问题。

Hexi Flexi Grid Layout

在《Sass绘制多边形》和《使用Sass制作菱形网格布局》文章中,我们了解了怎么通过Sass来实现多边形和菱形相关的网格布局,但这些在实际的布局中使用场景并不常见。最近@vmcreativeHexi Flexi Grid让我感到CSS Grid布局更强大的一面。而这种布局在实际的布局也可以一用。今天把这个仓库中的功能集成了SassMagic中。那么简单的花点时间来看看Hexi Flexi Grid布局。

页面

返回顶部