Build a Classic Layout FAST in CSS Grid
Summary
TLDRこのビデオスクリプトでは、CSS Gridの使い方を簡単に紹介しています。デフォルトのグリッドはブロックフローに似ており、安全に追加できます。グリッドギャップを追加して余白を一貫性のある方法で追加し、Firefoxのグリッドインスペクターを使って視覚化しました。グリッドテンプレート行と列を使って、ヘッダー、ナビゲーション、メインコンテンツ、フッターのサイズを設定し、レイアウトを調整。メディアクエリを使って、画面サイズが大きくなるとレイアウトを変更し、グリッドテンプレートエリアを使ってASCIIアートのようにレイアウトを定義。この方法で、さまざまな画面サイズやコンテキストで複数のレイアウトを設定できます。
Takeaways
- 🌟 CSS Gridsを使用すると、コードを少なくともすることができるで、興味深いレイアウトを作成できます。
- 🎨 display: gridをbodyに追加することで、グリッドの基本的な設定を始めることができます。
- 🔧 grid gapを使用して、グリッド間隔をより一貫した方法で調整できます。
- 🔎 Firefoxのnightly版でグリッドインスペクターを使用して、グリッドの可視化を確認できます。
- 📏 grid template rowsを使用して、ページの流れに沿った行のサイズを指定できます。
- 📐 min-height: 100vhを使用して、ビューポートの高さに合わせたレイアウトを作成できます。
- 📱 メディアクエリを使用して、画面サイズに応じてレイアウトを調整できます。
- 👉 grid template columnsを使用して、カラムの幅を設定し、サイドバーやメインスペースを定義できます。
- 🔄 grid column spanを使用して、ヘッダーやナビゲーションを複数の列や行にまたがらせることができます。
- 🏷️ grid areaを使用して、要素を特定のグリッド領域に割り当てることができます。
- 🎨 ASCIIアートのようにgrid template areasを使用して、レイアウトを定義することができます。
Q & A
CSS Gridの基本的な機能は何ですか?
-CSS Gridは、ウェブページのレイアウトを作成するための機能で、グリッドラインを自動的に生成し、グリッドギャップを追加することでブロック要素の間に一貫したスペースを提供します。
グリッドギャップを追加するとどうなりますか?
-グリッドギャップを追加すると、ブロック要素は指定されたスペースだけ離れ、ページの見通しを向上させます。
Firefoxのnightly版でグリッドを確認するにはどうすればいいですか?
-Firefoxのnightly版では、グリッドインスペクターを使用して、グリッドの視覚化を確認できます。
グリッドテンプレート行とグリッドテンプレート列はどのように使われますか?
-グリッドテンプレート行はページを下方向に、グリッドテンプレート列はページを右方向に拡張します。これらを使用することで、レイアウトに必要なスペースを効果的に管理できます。
auto-sizeとfr単位の違いは何ですか?
-auto-sizeは要素のコンテンツに基づいて自動的にサイズが決定され、fr単位は残りのスペースを的比例配分されます。
ビューポートの高さを指定するために100vhは使用されますが、これはどういう意味ですか?
-100vhはビューポートの高さを意味し、要素の高さをビューポート全体に合わせるために使用されます。
メディアクエリを使用する目的は何ですか?
-メディアクエリは、ページの幅が一定のサイズを超えた場合に、より複雑なレイアウトを適用するために使用されます。
グリッドエリアを使用する際に命名された「banner」、「nav」、「main」、「footer」はどのように機能しますか?
-これらの名前はグリッドエリアを識別し、レイアウトの調整を簡素化するために使用されます。1つの場所でレイアウトを変更することで、それらのエリアに割り当てられた全ての要素に影響を与えることができます。
グリッドテンプレートエリアを使用してレイアウトを定義する際のASCIIアートは何を意味しますか?
-ASCIIアートを使用することで、簡易な方法でグリッドレイアウトを視覚的に表現できます。これにより、モバイルレイアウトやさまざまな画面サイズに応じたレイアウトを簡単に調整できます。
グリッドを使用する際のフォールバックとは何を指しますか?
-フォールバックは、グリッドが無効になった場合に、最初に定義されたモバイルレイアウトに自動的に切り替わることを意味します。
CSS Gridを使用する際の利点は何ですか?
-CSS Gridを使用すると、固定単位と流体単位をより信頼性の高い方法で混在させてレイアウトを作成することができ、複雑なレイアウトの作成が簡単になります。
Outlines
🌟 CSS Gridsの基本的な使い方
この段落では、CSS Gridsの使い方について紹介されています。Gridsは複雑なレイアウトを作成するための仕様ですが、簡単に始められることがわかります。まず、body要素に`display: grid`を追加することで、既存のブロックフローに似たデフォルトグリッドが生成されます。次に、グリッドギャップを1emに設定し、ブロック要素同士の間にスペースを空けます。Firefoxのnightlyビルドでグリッドインスペクターを使用して、グリッドの可視化を行います。グリッドテンプレート行を定義し、ヘッダー、ナビゲーション、メインコンテンツ、フッターのサイズを調整します。特にメインコンテンツは、残りのスペースを必要に応じて自動的に調整します。ビューポートの高さを100vhに設定し、メインエリアがより多くのスペースを占有するようにします。
📱 モバイル向けのレイアウトとメディアクエリ
この段落では、モバイル向けのレイアウトを作成し、メディアクエリを使用して画面サイズが40emを超えた場合により複雑なレイアウトに変更する方法が説明されています。グリッドテンプレートカラムを使用して、サイドバーとメインスペースを定義し、サイドバーは12em、メインスペースは残りのスペースを占有するようにします。これにより、固定値と流体値をより信頼性の高い方法で混在させることができます。3つの行を定義し、ヘッダーが2つのカラムをまたぎ、ナビゲーションがサイドに沿って表示されるようにします。グリッドエリアを使用して、ヘッダー、ナビゲーション、メイン、フッターの配置を指定します。これにより、1つの場所でレイアウトを制御し、さまざまな画面サイズやコンテキストで複数のレイアウトを設定できます。また、ASCIIアートのようなグリッドテンプレートエリアを使用して、モバイルレイアウトを定義し、メディアクエリで構造を変更する方法も紹介されています。
Mindmap
Keywords
💡CSS Grids
💡display grid
💡grid gap
💡Firefox nightly
💡grid template rows
💡viewport height
💡media query
💡grid template columns
💡grid area
💡ASCII art
💡sticky footer
Highlights
展示快速开始使用CSS Grid的方法
CSS Grid规范可能令人生畏,但可以用很少的代码做出有趣的布局
通过在body上添加display grid,开始使用Grid
默认网格与默认块流非常相似,可以安全添加
Grid可以更一致地添加间隔(gutters)
通过设置grid gap为1em,使块元素之间产生间隔
使用Firefox nightly的Grid inspector来可视化网格
自动生成的隐式网格,在我们尚未定义它时自动创建
添加grid template rows来定义行大小
通过min height设置为100vh,使主区域占据更多空间
在媒体查询中为超过40em宽度的页面创建更复杂的布局
使用grid template columns设置侧边栏和主空间的列布局
Grid允许固定单位和流式单位的混合使用,提高了布局的可靠性
定义三行布局,并通过auto和one fraction设置它们的大小
通过grid area将header和nav跨越多个列和行
使用grid template areas通过ASCII艺术定义布局
通过媒体查询改变不同区域的结构,适应不同屏幕尺寸
如果关闭Grid,将自动获得初始的移动布局
Transcripts
(upbeat electronic music)
- I want to show you a quick way to
get started with CSS Grids.
I know the spec can be daunting,
there's a lot that it can do,
but we can start to do some fairly interesting layouts
with just very little code.
So I'm going to start here by just adding
display grid to the body.
And you can see that nothing really changes here,
the default grid is very much like the default block flow.
We can put it in there pretty safely
without expecting much to happen.
Now one of the cool things about Grid is that we can add
gutters in a more consistent way.
So I'm going to do that.
I'm going to add it's called grid gap
of 1em.
And all of my block elements will jump apart
by that much, so,
the grid gap goes between each of the grid areas.
I'm going to inspect this
in Firefox nightly here.
I've opened the grid inspector here
in Firefox.
And you can see here the body
now has this little tag next to it that says grid
and I'm going to click on that.
And that's going to show us the grid visually here
in the main window.
And you can see it's added lines around each area.
It's added this shading over the gutters.
And we have these line numbers.
So the first line is one
and then the second line is two,
three, four, five, so we've
automatically got five grid row lines
down the page.
And just one and two across.
There are also negative one index going backwards, so,
that's just happening automatically.
I'm going to turn that off quick.
So what we have there is the implicit grid
that's generated automatically
when we create a grid
and we haven't defined it yet.
What I'm going to do now is add some grid template rows.
So rows go down the page.
And I'm just going to give some sizing to these things.
I'm going to say that the first one is auto-sized
that's the header.
Then the nav is also going to be auto-size.
And then the main content is going to be one fraction
which means it can take up as much space as it needs to
in the layout.
However much space is remaining.
And then the footer, again, I'm going to set to auto.
Now that didn't change anything yet
because there's no extra space there
for the main area to take up.
So I'm just going to add some extra space
with a min height
of 100vh, that's viewport height.
So it's going to be at least the height of the viewport.
And you can see that because of the rows,
if I didn't have grid template rows there,
they would all expand in a similar way.
But by adding the grid template rows,
I've made it so that now the main area takes up more space
and the others stay the same size.
So this might work for us as a mobile layout.
And we might not even worry about the grid fallback
for mobile because it's fairly similar.
There's not really much happening here yet.
I'm going to try to create then inside of this media query
so for any page over 40em's wide
we're going to add a little bit more complex layout.
Again, we're going to use grid template columns.
But we're going to set up a sidebar that's 12ems
and then a main space that's one fraction,
that takes up all of the remaining space available
in the window.
And you can see that everything sort
of falls into place there automatically.
The first column stays 12em's
and the second column takes up whatever space is left.
And that's pretty cool,
because that means that we can start doing layouts
that really mix.
Fixed units with fluid units
in a more reliable way
which is a really nice thing about grid.
And then I'm going to say we actually want three rows.
So right now it's giving us two by default.
We want three rows.
The first one's going to be auto-sized,
the second one's going to be as much space as we need,
and then the footer will go along the bottom.
So, if I define those three rows auto, one fraction, auto.
Right now, we're not seeing that last row,
it's collapsing because there's nothing in it.
And what I'm going to do is tell the header
to span two columns.
I added grid column span two to the header.
And that made it take up the entire top space
instead of making the footer go the whole way across.
I'm going to make the nav go the whole way down that side.
So, I'm going to add nav grid row
span two
and it will go down that whole side
and then main and footer are both being pushed into place.
I don't have to be more explicit here if I don't want to be.
I could if it's useful for some reason.
But you can see here now we have a mobile view
on small screens
and when I make the screen bigger it jumps
to this layout.
I can also change the height of the window.
And you can see again that main and nav are stretching
as much as they need to
to take up the space while the header
and footer always remain the same size.
And it's a sort of sticky footer where
if the window gets big, the footer is still there.
But if the window is smaller
we're able to scroll.
Once we have these named areas,
the only thing that we have to do then
to make our header and navigation
span the multiple columns and rows,
is assign them a grid area.
So, we say header, grid area banner.
Nav grid area nav.
Main grid area main, etc.
And by giving them these names
we can just change in one place
what the layout that we want is going to look like
and then that will change for anything assigned
to that area.
You can see there I changed banner to just span one.
I could make nav come up here into the header.
And it will take over that space.
And that means that the parent element,
in this case the body,
it sort of controls the layout from one place.
So we can set up multiple layouts at different screen sizes
or in different contexts,
and everything else will fall into place.
Another thing that we can do with grid
that is really helpful for getting started
is use this grid template areas.
It's a way of using sort of ASCII art
to define a layout.
So I have to find our mobile layout here
by just giving names to
the four different areas we have in mobile.
And let's just see them there.
We have a banner, nav, main, and footer.
And then I can add a media query.
All I have to do with a media query is change
the structure of those areas.
So now I've made banner go across two columns
and then nav in a single column
and then main side by side.
And then nav and footer are also side by side.
So you can see here, the banners going to go across the top.
The nav is going to come down the side.
And then main and footer are going to fill in the gaps.
And when we extend our window
that's what we see happen.
And I think that's just a great way
to get started with Grid.
That's really sort of the,
the terms and pieces of code that you need to get started.
And you can see that some of the fallbacks
are going to happen in some ways automatically.
If you turn off Grid,
you'll automatically get the mobile layout
that you started with.
And you can build on top of that.
Have fun and get started with Grid.
(upbeat electronic music)
Voir Plus de Vidéos Connexes
5.0 / 5 (0 votes)