歡迎回來，在這一課中，我們將繼續與特別是引導網格有兩個主要特點我想強調的工作。
首先，我想解決我簡要地提到的四個不同的大小。
我們一直在與列Elgie工作還沒有談到這意味著什麼，並有其他三種尺寸，這將一起工作。
他們還希望向您展示我們如何可以在其他網格內窩網格來進一步劃分這些12個單位分成小塊。
但是，談到四種尺寸我要通過返回給瀏覽器，並採取一看，我們建於最後一課演示開始，雖然開始。
因此，我們有兩排一個有12列一個有三個打算對面，看著我調整窗口的大小規模的東西就好了會發生什麼，然後我們打了一個破發點就在這裡，其中每列中一切都變了。
現在佔據了整整12個單位去對面，他們堆疊在另一個之上，因為他們不斷調整你不會真正注意到任何更改。
他們都繼續佔用12個單位和堆疊在另一個之上。
但實際上，我們可以指定，所以我們可以有四種不同的佈局四種不同尺寸。
現在這是一個移動的佈局是超小型的訪問。
然後我們太小，它就像一個平板佈局，然後介質就在這裡。
這將是一台筆記本電腦或一個較小的瀏覽器窗口，再大，我們必須在這裡。
因此，它看起來並不像有很大的差別，除了在這裡，當我們是偶數之間的大走。
但也有四種尺寸，我們可以對這些尺寸中的每一個指定比率和比例。
因此，對下的網格選項引導碼頭這裡的網格系統，你可以看到有一個表，它向我們展示了四種不同尺寸。
因此，有額外的像手機比這是平板電腦中的設備小型設備小型設備桌面是大於1200像素寬大型設備或更大的台式機和他們每個人都有一個前綴，我們可以用so列訪問實際上是小的。
S.M.小醫學博士是中型和LG是大是我們一直使用的是什麼。
所以我們說，我想我的佈局留在大斷點一樣。
然後當我們切換到中等這裡我想這12列，每佔用一個單元。
我希望他們每個佔用兩個單元來代替。
因此，我們將有六個跨去結束。
下面再進一步的6。
因此，讓我們專注於這一點，把事情簡單化。
我居然幹掉了第二排的現在。
因此，所有我們已經在這裡這個權利。
所以，當我們打到這個媒介斷點在那裡，我不希望這種事情發生。
相反，我想六列跨去做到這一點。
我只是添加另一個類。
所以我會做給每個之一，它的將是列中。
所以，當這個網格設置中等大小，我們希望他們每個人佔用兩個單元，我們可以節省。
現在讓我們去刷新。
使全尺寸。
沒有什麼變化，因為我們是在大尺寸。
但現在當我切換到中等這裡。
請注意，他們現在每佔用兩個單元，我們送六跨去。
如果我繼續萎縮下來，我們則打小斷點，而這也正是它切換其中每列現在去跨越整整12個單位所有的方式，它們堆疊在彼此頂部。
因此，讓我們回過頭來閱讀，讓我們回到我們的崇高，重振我們的老格。
因此，我們將擺脫這一個，因為它不是常見的居然有12個不同的組件去跨越。
通常你有三個或四個有時6，但12個人的工作列是相當罕見的。
因此，讓我們回到這一個，我們要做的是設法重新創建網格發揮出奧拉維爾·阿諾德的旅遊日程這裡。
因此，它開始在四個對面去。
然後，我們縮小了下來。
有一個中等破發點，我們還在四個，然後我們得到的小破發點，我們去跨越兩個。
然後移動式X或小是其中之一。
所以，這就是我們會嘗試並重新創建不只是內容的結構。
因此，我們將在這裡回去。
我們要開始有四個去對面。
這意味著，每個人佔用三個單位，然後我們可以在這裡更改文本。
而且，我們只是說給或日期。
因此，如果我們是新鮮的，我們應該有四列跨去，我們做這正是本開出四跨去。
唯一不同的是真正的實際內容。
因此，而不是每列的我們想補充的H三個段落按鈕和任何其他內容，我們需要一點H.R.看起來，我們還是會得到相同的間距。
好吧。
所以，下破的一點是，當我們去網上平台。
它保持在四個。
所以，你可能會認為，我們需要做的是指定中斷點，所以當我們到了這一點，他們還是應該各佔用三個單元。
我們可以回去昇華，並添加，再打電話給他們中三個保存和他們每個人在開始我們就打中三個單位，他們留在三個單位，然後我們前往小，現在他們又是12個單位。
我們希望為後續請問這是什麼，當我們打小尺寸他們現在各自佔據六個單元，所以我們可以去這裡並補充說，在列小6。
因此，大尺寸的這些每一個在中等規模的佔25％，三個單位出12。
一樣。
他們採取了25％，然後在小尺寸這是片他們各自再佔用50％。
因此，讓我們刷新每個佔用三分鐘，然後三個單位，然後我們打小。
而現在，他們每佔用六個單位，然後我們有額外的小。
然後，他們將自動佔據整個12個單位這是我們想要的。
你可以看到，當我們打小，我們希望他們採取了一個單位去對面。
好吧。
因此，我們必須下來有一個小的變化，我們可以做，如果我們回到崇高。
你會看到，我們兩次指定該3台大中。
事實上，我們可以幹掉3列大，只是擺在那裡中型和引導就會知道，因為我們設置中是三，我們不會明確設置大它將只是我們設置為中等和應用它大。
因此，它的工作方式相同。
什麼也沒有變。
我已經刷新看起來與我們的中斷點仍然存在，我們的小作品。
所以我們不必以指定的兩倍。
所以才讓我來N.Z.我們擺脫了這一點，它的工作原理完全一樣的方式。
而事實上，如果我們看一看我們去的網站。
我敢打賭，如果我們檢查每個這些，你會看到我們走。
列小六列中三種。
正是我們現在我們已經介紹了這四個不同的尺寸了。
希望你能看到的網格系統如何靈活和有用的是。
我們回去吧。
現在，我會解決的嵌套網格。
讓我們假設，而不是這個第一列在這裡我想把它分成兩半，並有重要的是左側的東西，東西在右側。
其實，我可以去另一行加有內部。
因此類的equals一行。
然後該行裡面，我可以在一個div類等於列，一切都只是過大增加，現在大列六到另一列大6，我將只是寫在這裡一些文字一半，另一半。
讓我們將其更改為上半場的另一半，我們將保存，讓我們給他們一個經典的粉紅色。
所以，我們現在已經做的是，我們將有三個橫跨去還是四個跨去。
一二三四，並在第一個，我們已經通過添加另一行，我們正在使用的前六說些什麼，我們正在使用的第二個六說別的東西保存或刷新它拆分成另外12台。
你去那裡，使它更加明顯。
讓我給他們另一個類。
讓我們把它叫做橙色。
但不存在。
而這個定義出現橙色和將有橙色的背景，我們將為了一個像素穩定紅色，然後真正做到什特確定補充。
刷新你可以看到，現在我們仍然有這四樣東西去跨越。
每個人佔用了三個單位，但我們通過增加該行的拆分第一個到六個單位六個單位，你必須添加的行。
你不能只是開始做這個，你有一列，而不是列。
必須有一排。
讓我們做一個。
讓我們把這個最後一個在這裡成六小件內。
因此，我們需要裡面添加一排該div類的equals行，而不是在那裡。
我們需要另一個div，我們就會有這六個，我們有大量的列各兩個佔用了三分之二的12個單位。
我們希望六和然後我們會去每個人，讓我們在橙類添加只是讓我們可以看到它們。
好。
因此，我們有四大跨列，我們分成兩半第一個去。
最後一個，我們一分為六塊，你不能真正看到任何東西，所以我們沒有把任何文本在那裡。
所以，讓我們做到這一點。
或者更確切地說，它實際上只是給帶或高度的類橙色。
讓我們把他們每次50個像素。
如果我刷新你看，現在擁有橙色該類橙色高度佔據了50像素的一切。
因此，我們有四個平分秋色頂級列裡我們兩個平分秋色列，然後我們六平分秋色列。
所以這就是全部並網發電系統的重要作品。
簡單地說，我們有每一行中12個單位。
但是你喜歡你分割起來。
有四種尺寸大中小超小，你可以在任何的四個破發點的四種不同尺寸的重新分配的12個單位。
這就是你怎麼收場與這些漂亮的響應佈局和一般模式，你看到的是，在移動網站。
因此，對多餘的小尺寸大多數網站都會有自己的內容只是堆疊彼此像我們這裡會頂，如果我縮小下來。
這是在移動設備上，其中沒有內容的多個片段在同一行中的公共佈局。
好。
讓我們回到昇華。
確保我談到了三個主要目標。
所以我們談到的目的網格系統的角度幫助我們打下的事情了。
這很棒。
了解四種不同尺寸。
這些都是大中小超小型，然後右鍵嵌套網格。
這就是我們在這裡做什麼，我們添加行，而不是一列，然後我們可以填補該行與下一個視頻進一步分列。