---
# System prepended metadata

title: Grid 網格|chrisHsiao
tags: [CSS]

---

---
tags: CSS,
disqus: hackmd
---

# Grid 網格|chrisHsiao

在Bootstrap來說網格是從小到大來看

![](https://i.imgur.com/lxoffF5.png)


第一行是指螢幕的寬
第二行是指內容物的寬

所以在寫RWD的時候，因為是從最小開始寫，Extra small就不用寫@media，從Small開始寫
Small = @media screen and (min-width: 576px)

Medium = @media screen and (min-width: 720px)

Large = @media screen and (min-width: 960px)

Extra large = @media screen and (min-width: 1200px)

---

如果你是從大寫到小，也想跟bootstrap一樣的斷點

Extra Large就不用寫@media

Extra Small = @media screen and (max-width: 575px)

Small = @media screen and (max-width: 767px)

Medium = @media screen and (max-width: 991px)

Large = @media screen and (max-width: 1199px)

---
###### tags: `CSS` `grid` `bootstrap`