CSSグリッドで画像ギャラリーを作成する方法

UnsplashやPinterestなどのウェブサイトで作成された画像ギャラリーは、画像アイテムの配置翻訳などの手法で作成されていますが、これは非常に面倒な作業です。CSSグリッドを使用すると、同じ機能を非常にすばやく実現できます。

例:上記は、CSSグリッドの完璧な使用例であるさまざまな幅高さの画像を含む画像のギャラリーです。

始めましょう!

基礎となるグリッド

それでは、8x8グリッドを作成しましょう。他のサイズのグリッドを作成することもできますが、それは必要なギャラリーのタイプによって異なります。私たちの場合、8x8グリッドが理想的です。

  • グリッドコンテナは、要素の表示プロパティをグリッドに設定することで定義されます。したがって、クラスgridを持つdivグリッドコンテナになります
  • 我々は、使用グリッドテンプレート列に設定するプロパティをカラムトラックグリッドテンプレートの行を設定する行トラック。これらのプロパティはグリッドコンテナで宣言します。この例では、8x8グリッドコンテナを作成します。
  • grid-gap:グリッドレイアウトの列のギャップのサイズを定義します。グリッドギャップの値は、任意のCSS長さの単位にすることができます。この例では、グリッドの見栄えを良くするために15pxの値を指定ました

HTML:

CSS:

.gallery { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 5vw); grid-gap: 15px; }
注:行の高さはビューポートの幅に関連付けられているため、セルはアスペクト比を完全に細かく維持します。我々は持っている8行の高さで各5ビューポートの幅を。私は、これらの高さで実験し、という結論に来た5%ビューポートの幅があり、完璧なサイズの高さのために。これを行うには、行の高さを5vw(ビューポートの幅)に設定します。注:グリッドのすべての直接の子は、自動的にグリッドアイテムになります

グリッドアイテムの挿入

次に、グリッドコンテナ内にグリッドアイテムを挿入します。

画像のスタイリング

.gallery__img { width: 100%; height: 100%; object-fit: cover; }

設定オブジェクトフィットに値をカバーすることは設定のようなものです背景サイズをカバーするために、背景画像。これは、画像がボックス(グリッドアイテム)の高さと幅を埋め、アスペクト比を維持できるようにするためです。

注:オブジェクトフィットプロパティは、高さのプロパティを設定した場合にのみ機能します。注:デフォルトでは、グリッドアイテムグリッドの自動配置ルールに従って配置されます

グリッドアイテムの配置

グリッドアイテムの配置を開始する前に、いくつかの基本的な概念を学習します。

grid divグリッドコンテナであり、すべての直接の子要素はグリッドアイテムです。 grid-template-columnsとgrid-template-rowsを使用してグリッドトラックを定義すると、gridは、アイテムの配置に使用するグリッド線と呼ばれる番号付きの線を提供しました。各グリッド線は数値インデックスで参照できます。

列は1から始まりますから、右にデフォルトで、そして行はまたから1で始まるトップ。1つの列または行を作成するには2つのグリッド線が必要で、両側に1つの線があるため、8列8行のグリッドは

9列の行9行の行

垂直線12は、最初の列の開始終了点を決定します。232番目の列などです。同様に、水平線12最初の行の位置を決定し、行23は2番目の行の位置を決定します。上記の概念を知っていると、グリッド上にアイテム(画像)を配置する方法を理解するのに役立ちます。

次に、グリッドの行番号を使用して、プロパティをグリッドアイテムに直接適用することにより、アイテムの配置方法を制御します。グリッドアイテムが開始および終了する行と、展開するトラックの数を指定できます。

1番目のグリッドアイテム

それでは、最初のグリッドアイテムを対象とする新しいルールを作成しましょう。最初にgrid-column-startプロパティを使用して、最初のグリッドアイテムが開始する列グリッド線を示します。グリッド列の端部は、ここで第1グリッド項目の端部を示しています。

したがって、grid-column-startは、列の左端にあるグリッド線を示す数値です。grid-column-endは、列の右端をマークするグリッド線を示します。

そう例では設定、下記格子列開始まで1グリッド列エンド3グリッド項目は、グリッド線の左端から延伸することを意味ライン1ライン3を埋め、2列を。また、grid-row-startプロパティとgrid-row-endプロパティを使用して、の場合と同じ方法で、行のグリッド線上グリッドアイテムの開始位置終了位置を示します。

.gallery__item--1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }
注:ここで、上記で学習したのと同じ原則に基づいて他の項目を配置します。

2番目のグリッドアイテム

.gallery__item--2 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 1; grid-row-end: 3; }

3番目のグリッドアイテム

.gallery__item--3 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 1; grid-row-end: 6; }

4番目のグリッドアイテム

.gallery__item--4 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 3; grid-row-end: 6; }

5番目のグリッドアイテム

.gallery__item--5 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 6; grid-row-end: 9; }

6番目のグリッドアイテム

.gallery__item--6 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 6; grid-row-end: 9; }

You can find the complete code below.

         CSS Grids Gallery 

And the CSS:

*, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; } html { box-sizing: border-box; font-size: 62.5%; } body { font-family: "Nunito", sans-serif; color: #333; font-weight: 300; line-height: 1.6; } .container { width: 60%; margin: 2rem auto; } .gallery { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 5vw); grid-gap: 1.5rem; } .gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery__item--1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; /** Alternative Syntax **/ /* grid-column: 1 / span 2; */ /* grid-row: 1 / span 2; */ } .gallery__item--2 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 1; grid-row-end: 3; /** Alternative Syntax **/ /* grid-column: 3 / span 2; */ /* grid-row: 1 / span 2; */ } .gallery__item--3 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 1; grid-row-end: 6; /** Alternative Syntax **/ /* grid-column: 5 / span 4; grid-row: 1 / span 5; */ } .gallery__item--4 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 3; grid-row-end: 6; /** Alternative Syntax **/ /* grid-column: 1 / span 4; */ /* grid-row: 3 / span 3; */ } .gallery__item--5 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 6; grid-row-end: 9; /** Alternative Syntax **/ /* grid-column: 1 / span 4; */ /* grid-row: 6 / span 3; */ } .gallery__item--6 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 6; grid-row-end: 9; /** Alternative Syntax **/ /* grid-column: 5 / span 4; */ /* grid-row: 6 / span 3; */ }

You can try adding your own CSS to make this gallery look the way you want it to look. You can also create more complex image galleries very easily.

You can learn more about the CSS Grids in the link given below

A Complete Guide to Grid | CSS-Tricks

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can…css-tricks.com

I hope you’ve found this post informative and helpful. I would love to hear your feedback!

Thank you for reading!