CSSグリッドを使用して複雑なレイアウトを作成するためのヒント! (集める価値がある)

(推奨チュートリアル: CSS チュートリアル )

グリッド レイアウトは最新の CSS です。最も強力な機能。グリッド レイアウトを使用すると、外部 UI フレームワークを使用せずに、複雑で高速なレイアウトを構築できます。この記事では、CSS グリッドについて知っておくべきことをすべて説明します。

CSS グリッドの基礎知識

以下に示すようにコードに直接進み、最初にタグをいくつか書きます。ソース コードはこのリンクにあります: https://codepen.io/Shadid /pen/ zYqNvgv

<p>
  <header>Header</header>
  <aside>Aside 1</aside>
  <section>Section</section>
  <aside>Aside 2</aside>
  <footer>Footer</footer>
</p>

上記では、header、2 つの aside、および footer 要素を作成し、 で囲みました。コンテナ要素。コンテナ要素内のすべての要素に背景色とフォント サイズを追加します。

.container > * {
  background: aquamarine;
  font-size: 30px;
}

実行中の Web ページは次のとおりです:

次に、いくつかのグリッド プロパティを追加します:

.container {
  display: grid;
  grid-gap: 5px;
  grid-template-areas: 
    "header"
    "aside-1"
    "aside-2"
    "section"
    "footer"
}

/* Assign grid areas to elements */
header {
  grid-area: header;
}

aside:nth-of-type(1) {
  grid-area: aside-1;
}

aside:nth-of-type(2) {
  grid-area: aside-2;
}

section {
  grid-area: section;
}

footer {
  grid-area: footer;
}

まず、## を定義します。 # display:grid でグリッド レイアウトを有効にし、grid-gap を使用してグリッド要素にギャップを追加します。

次に、各 html 要素にグリッド領域名を割り当てます。

container クラスでは、grid-template-areas` 属性を使用して HTML テンプレートの外観を定義できます。グリッド テンプレート領域がどのように配置されているかに注意してください。

grid-template-areas: 
    "header"
    "aside-1"
    "aside-2"
    "section"
    "footer"

要素の順序は dom 構造とは異なります。ただし、最終的にはネットワーク リージョンの順序で表示されます。

次のステップは、ページをレスポンシブにすることです。より大きな画面で別のレイアウトを使用したいと考えています。 CSS グリッドを使用すると、メディア クエリの処理と応答性の高いレイアウトの作成が非常に簡単になります。以下のコードを見てください:

@media (min-width: 670px) {
  .container {
    grid-template-areas: 
      "header  header  header"
      "aside-1 section  aside-2"
      "footer    footer    footer"
  }
}

私たちがしなければならないのは、メディア クエリ内のグリッド テンプレート領域の順序を変更することだけです。

グリッドの列と行

CSS グリッドを使用して列と行を整理するにはどうすればよいですか?次のコードから始めます:

<p>
  </p><p>One</p>
  <p>Two</p>
  <p>Three</p>
  <p>Four</p>
  <p>Five</p>
  <p>Six</p>

いくつかの基本的な CSS を追加します

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
}

.item {
  background: lightcoral;
}

上記の dom 構造にグリッド レイアウトを使用し、スタイル間の

grid-gap スペースを使用して追加しました。 。ここで、grid-template-columns プロパティを使用していくつかの列を追加します。

.container {
    display: grid;
    height: 100vh;
    grid-gap: 10px;
    grid-template-columns: 100px 200px auto auto;
}

このように、列を使用しました。最初の列を

100px として指定し、2 番目の列を 200px として指定します。列 3 と 4 に auto を適用したため、残りの画面の長さはそこで半分に分割されます。

ページ内に空白スペースがあることがわかります。

6 番目の列 を 3 番目の列 と 4 番目の列 に移動したい場合はどうすればよいですか?このために、grid-column-start プロパティと grid-column-end プロパティを使用できます。

.item:nth-of-type(6) {
  grid-column-start: 3;
  grid-column-end: 5;
}

grid-column-end: 5 を使用し、値 5 が列行を指すことに注意してください。 4 番目の列はグリッドの 5 行目で終わります。 grid-column-start および grid-column-end の値は、グリッド線を参照します。

グリッド線の値がわかりにくい場合は、

span を使用することもできます。これにより、上記と同じ効果が得られます。

.item:nth-of-type(6) {
  grid-column-start: 3;
  grid-column-end: span 2;
}

For

span 2 、p がグリッド内の 2 つのスロットを占有することを指定します。ここで、 2 番目の列 を展開して、下の空のスペースを埋めるとします。これは、grid-column-start 属性を使用して簡単に行うこともできます。

.item:nth-of-type(2) {
  grid-row-start: span 2;
}

span と grid-row-start を使用して、2 つのスロットを占有することを指定します。

上記のとおり、少数の CSS グリッド プロパティを使用して、非常に複雑なレイアウトを構築することができました。

グリッド テンプレートを効果的に使用する

次に、

グリッド テンプレートを見てみましょう。このセクションでは、さまざまな画面サイズに応じてさまざまなレイアウトを作成する方法について説明します。

まず、dom 構造から始めましょう:

<p>
  <header>header</header>
  <aside>Left</aside>
  <section>Section</section>
  <aside>Right</aside>
  <footer>Footer</footer>
</p>

次に、いくつかのスタイルを追加します:

``
.container {
 display: grid;
 height: 100vh;
 grid-gap: 10px;
}
.container > * {
 background: coral;
 display: flex;
 justify-content: center;
 align-items: center;
}`
``

要素に背景色を追加しました。上記のコードからわかるように、

flex 属性も使用します。 flex と grid を組み合わせることができます。この特定の例では、flex プロパティを使用してコンテンツを中央揃えにします。

对于移动端，我们希望section在header下面，right 在 section 下面，我们可以使用网格区域来完成。首先，我们定义网格区域：

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-areas: 
   "header"
    "section"
    "right"
    "left"
    "footer"
}

aside:nth-of-type(1) {
  grid-area: left;
}

aside:nth-of-type(2) {
  grid-area: right;
}

section {
  grid-area: section;
}

footer {
  grid-area: footer;
}

header {
  grid-area: header;
}

在 grid-template-areas 中可以看到，我们先有header ，然后是section，然后是right，最后是left。此外，我们希望我们的section比 left 和 right都大点。为了实现这一点，我们可以使用rid-template-rows 属性

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-areas: 
    "header"
    "section"
    "right"
    "left"
    "footer";
  grid-template-rows: 1fr 6fr 2fr 2fr 1fr;
}

我们可以根据需要设置移动端的视图，接下我们使用媒体查询来适配一下大屏幕：

@media (min-width: 500px)  {
  .container {
    grid-template-areas: 
      "header header  header"
      "left   section right"
      "footer footer  right";
    grid-template-rows: 1fr 6fr 1fr;
    grid-template-columns: 1fr 6fr 1fr;
  }
}

如何使用minmax函数动态跟踪元素的大小

假设我们有两列，它们均匀地占据了屏幕上的可用空间。通过使用 grid-template-columns，我们可以很容易地做到这一点。但是，如果我们想要其中一个在200px到500px之间呢?我们的列可以适应不同的屏幕尺寸，但其中一个永远不会大于500px或小于200px。

对于这些类型的场景，我们使用minmax函数。 让我们来看看它的实际效果。

<p>
  </p><p>One</p>
  <p>Two</p>

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: minmax(200px, 500px) minmax(100px, auto);
}
.one {
  background: cyan;
}
.two {
  background: pink;
}

在这个例子中，第一列总是在200px到500px之间。然而，第二列的最小值可以是100px，对于更大的屏幕，它将覆盖屏幕的其余部分。

如何使用 repeat 函数？

我们讨论一下元素中的重复模式。我们如何处理它们?我们可以重复我们的代码或使用javascript。不过，还有另一种方法可以用css来实现。repeat函数表示轨道列表的一个重复片段，允许以更紧凑的形式编写显示重复模式的大量列或行。

<p>
  </p><p>
    This item is 50 pixels wide.
  </p>
  <p>
    Item with flexible width.
  </p>
  <p>
    This item is 50 pixels wide.
  </p>
  <p>
    Item with flexible width.
  </p>
  <p>
    Inflexible item of 100 pixels width.
  </p>

#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > p {
  background-color: #8ca0ff;
  padding: 5px;
}

嵌套网格

我还可以将网格嵌套在另一个网格中， 来看看如何实现这一点：

<p>
  </p><p>One</p>
  <p>Two</p>
  
Three
  

    
i
    
ii
    
iii
    
iv
    
v
    
vi
  
  
Five
  
Six

我们首先在外部container上声明网格：

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, auto))
}

注意，我们在网格模板中有一个repeat函数，并将其与一个minmax函数组合在一起。我们现在也可以将网格属性应用到内部网格。

.inner-grid {
  display: grid;
  background: white;
  height: 100%;
  grid-gap: 5px;
  grid-template-columns: repeat(3, auto);
}

这样，我们网格中嵌套了一个网格。

今天就跟大家分享到这里，感谢大家的观看，我们下期再见！

原文地址：https://blog.soshace.com/how-to-build-complex-layouts-with-css-grid/

作者：Shadid Haque

更多编程相关知识，请访问：编程入门！！

以上がCSSグリッドを使用して複雑なレイアウトを作成するためのヒント! (集める価値がある)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。