Grid Garden
10893 ワード
レコーダーなしでCSS Layoutを勉強します.
その中でGridの概念を楽しく学べるGrid Gardenゲームをまとめました
https://cssgridgarden.com/#koに入ると楽しめます.
ステップ1
その中でGridの概念を楽しく学べるGrid Gardenゲームをまとめました
https://cssgridgarden.com/#koに入ると楽しめます.
ステップ1
グリッド要素の開始列(column)の位置を指定します. integer:正、負の整数を設定可能 span整数:spanは正の値 にのみ設定できます.
第一段階正解
grid-column-start: 3;
ステップ2
第2段階正解
grid-column-start: -2;
手順3
グリッド要素の最後の列(column)の位置を指定します. integer:正、負の整数を設定可能 span整数:spanは正の値 にのみ設定できます.
第3段階正解
grid-column-end: 4;
手順4
手順4正解
grid-column-end: -5;
手順5
5次正解
grid-column-end: -2;
ステップ6
6次正解
grid-column-start: -3;
ステップ7
手順7正解
grid-column-end: span 2;
ステップ8
手順8正解
grid-column-end: span 5;
ステップ9
9階正解
grid-column-start: span 3;
ステップ10
グリッド要素の列(column)の位置を指定します.
grid-column:grid-column-start値/grid-column-end値spanキーワードを使用することもできます.
手順10正解
grid-column: -3 / -1;
ステップ11
11階正解
grid-column: 2 / span 3;
ステップ12
グリッド要素の開始行(row)の位置を指定します. integer:正、負の整数を設定可能 span整数:spanは正の値 にのみ設定できます.
十二次正解
grid-row-start: 3;
ステップ13
グリッド要素の行(row)の位置を指定します.
grid-row:grid-row-start値/grid-row-end値spanキーワードを使用することもできます.
13階が正しい
grid-row: 3 / -1;
ステップ14
14次正解
grid-row: -1 / -2;
grid-column: 2;
ステップ15
15次正解
grid-column: 2 / -1;
grid-row: 1 / -1;
ステップ16
グリッド要素のサイズと位置を指定します.
grid-area:grid-row-start値/grid-column-start値/grid-row-end値/grid-column値
16次正解
grid-area: 1 / 2 / 4 / -1;
ステップ17
17次正解
grid-area: 2 / 3 / 5 / -1;
ステップ18
グリッド要素の順序を指定します. integer:正、負の整数を設定可能 18階正解
order: 1;
ステップ19
19階正解
order: -1;
ステップ20
グリッドの列(column)のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の列(列)を指定するときに を使用します. fr:空き領域を共有して割り当て 手順20正解
grid-template-columns: 50%;
ステップ21
21階正解
grid-template-columns: repeat(8, 12.5%);
ステップ22
ステップ22が正しい
grid-template-columns: 100px 3em 40%;
ステップ23
23階正解
grid-template-columns: 1fr 5fr;
ステップ24
ステップ24が正しい
grid-template-columns: 50px repeat(3, 1fr) 50px;
ステップ25
25階正解
grid-template-columns: 75px 1.5fr 1fr;
ステップ26
グリッドの行のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の行(行)を指定するときに を使用します. fr:空き領域を共有して割り当て 26階正解
grid-template-rows: 12.5px 12.5px 12.5px 12.5px auto;
ステップ27
グリッドの行(row)と列(column)のサイズと名前を指定します.
grid-template:grid-template-rows値/grid-template-columns値
ステップ27が正しい
grid-template: 60% / 200px;
ステップ28
ステップ28が正しい
grid-template: auto 50px / 1fr 4fr;
Reference
この問題について(Grid Garden), 我々は、より多くの情報をここで見つけました
https://velog.io/@yeonlisa/Grid-Garden
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
グリッド要素の開始列(column)の位置を指定します.
第一段階正解
grid-column-start: 3;ステップ2
第2段階正解
grid-column-start: -2;
手順3
グリッド要素の最後の列(column)の位置を指定します. integer:正、負の整数を設定可能 span整数:spanは正の値 にのみ設定できます.
第3段階正解
grid-column-end: 4;
手順4
手順4正解
grid-column-end: -5;
手順5
5次正解
grid-column-end: -2;
ステップ6
6次正解
grid-column-start: -3;
ステップ7
手順7正解
grid-column-end: span 2;
ステップ8
手順8正解
grid-column-end: span 5;
ステップ9
9階正解
grid-column-start: span 3;
ステップ10
グリッド要素の列(column)の位置を指定します.
grid-column:grid-column-start値/grid-column-end値spanキーワードを使用することもできます.
手順10正解
grid-column: -3 / -1;
ステップ11
11階正解
grid-column: 2 / span 3;
ステップ12
グリッド要素の開始行(row)の位置を指定します. integer:正、負の整数を設定可能 span整数:spanは正の値 にのみ設定できます.
十二次正解
grid-row-start: 3;
ステップ13
グリッド要素の行(row)の位置を指定します.
grid-row:grid-row-start値/grid-row-end値spanキーワードを使用することもできます.
13階が正しい
grid-row: 3 / -1;
ステップ14
14次正解
grid-row: -1 / -2;
grid-column: 2;
ステップ15
15次正解
grid-column: 2 / -1;
grid-row: 1 / -1;
ステップ16
グリッド要素のサイズと位置を指定します.
grid-area:grid-row-start値/grid-column-start値/grid-row-end値/grid-column値
16次正解
grid-area: 1 / 2 / 4 / -1;
ステップ17
17次正解
grid-area: 2 / 3 / 5 / -1;
ステップ18
グリッド要素の順序を指定します. integer:正、負の整数を設定可能 18階正解
order: 1;
ステップ19
19階正解
order: -1;
ステップ20
グリッドの列(column)のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の列(列)を指定するときに を使用します. fr:空き領域を共有して割り当て 手順20正解
grid-template-columns: 50%;
ステップ21
21階正解
grid-template-columns: repeat(8, 12.5%);
ステップ22
ステップ22が正しい
grid-template-columns: 100px 3em 40%;
ステップ23
23階正解
grid-template-columns: 1fr 5fr;
ステップ24
ステップ24が正しい
grid-template-columns: 50px repeat(3, 1fr) 50px;
ステップ25
25階正解
grid-template-columns: 75px 1.5fr 1fr;
ステップ26
グリッドの行のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の行(行)を指定するときに を使用します. fr:空き領域を共有して割り当て 26階正解
grid-template-rows: 12.5px 12.5px 12.5px 12.5px auto;
ステップ27
グリッドの行(row)と列(column)のサイズと名前を指定します.
grid-template:grid-template-rows値/grid-template-columns値
ステップ27が正しい
grid-template: 60% / 200px;
ステップ28
ステップ28が正しい
grid-template: auto 50px / 1fr 4fr;
grid-column-start: -2; グリッド要素の最後の列(column)の位置を指定します.
第3段階正解
grid-column-end: 4;手順4
手順4正解
grid-column-end: -5;
手順5
5次正解
grid-column-end: -2;
ステップ6
6次正解
grid-column-start: -3;
ステップ7
手順7正解
grid-column-end: span 2;
ステップ8
手順8正解
grid-column-end: span 5;
ステップ9
9階正解
grid-column-start: span 3;
ステップ10
グリッド要素の列(column)の位置を指定します.
grid-column:grid-column-start値/grid-column-end値spanキーワードを使用することもできます.
手順10正解
grid-column: -3 / -1;
ステップ11
11階正解
grid-column: 2 / span 3;
ステップ12
グリッド要素の開始行(row)の位置を指定します. integer:正、負の整数を設定可能 span整数:spanは正の値 にのみ設定できます.
十二次正解
grid-row-start: 3;
ステップ13
グリッド要素の行(row)の位置を指定します.
grid-row:grid-row-start値/grid-row-end値spanキーワードを使用することもできます.
13階が正しい
grid-row: 3 / -1;
ステップ14
14次正解
grid-row: -1 / -2;
grid-column: 2;
ステップ15
15次正解
grid-column: 2 / -1;
grid-row: 1 / -1;
ステップ16
グリッド要素のサイズと位置を指定します.
grid-area:grid-row-start値/grid-column-start値/grid-row-end値/grid-column値
16次正解
grid-area: 1 / 2 / 4 / -1;
ステップ17
17次正解
grid-area: 2 / 3 / 5 / -1;
ステップ18
グリッド要素の順序を指定します. integer:正、負の整数を設定可能 18階正解
order: 1;
ステップ19
19階正解
order: -1;
ステップ20
グリッドの列(column)のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の列(列)を指定するときに を使用します. fr:空き領域を共有して割り当て 手順20正解
grid-template-columns: 50%;
ステップ21
21階正解
grid-template-columns: repeat(8, 12.5%);
ステップ22
ステップ22が正しい
grid-template-columns: 100px 3em 40%;
ステップ23
23階正解
grid-template-columns: 1fr 5fr;
ステップ24
ステップ24が正しい
grid-template-columns: 50px repeat(3, 1fr) 50px;
ステップ25
25階正解
grid-template-columns: 75px 1.5fr 1fr;
ステップ26
グリッドの行のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の行(行)を指定するときに を使用します. fr:空き領域を共有して割り当て 26階正解
grid-template-rows: 12.5px 12.5px 12.5px 12.5px auto;
ステップ27
グリッドの行(row)と列(column)のサイズと名前を指定します.
grid-template:grid-template-rows値/grid-template-columns値
ステップ27が正しい
grid-template: 60% / 200px;
ステップ28
ステップ28が正しい
grid-template: auto 50px / 1fr 4fr;
grid-column-end: -5; 5次正解
grid-column-end: -2;ステップ6
6次正解
grid-column-start: -3;
ステップ7
手順7正解
grid-column-end: span 2;
ステップ8
手順8正解
grid-column-end: span 5;
ステップ9
9階正解
grid-column-start: span 3;
ステップ10
グリッド要素の列(column)の位置を指定します.
grid-column:grid-column-start値/grid-column-end値spanキーワードを使用することもできます.
手順10正解
grid-column: -3 / -1;
ステップ11
11階正解
grid-column: 2 / span 3;
ステップ12
グリッド要素の開始行(row)の位置を指定します. integer:正、負の整数を設定可能 span整数:spanは正の値 にのみ設定できます.
十二次正解
grid-row-start: 3;
ステップ13
グリッド要素の行(row)の位置を指定します.
grid-row:grid-row-start値/grid-row-end値spanキーワードを使用することもできます.
13階が正しい
grid-row: 3 / -1;
ステップ14
14次正解
grid-row: -1 / -2;
grid-column: 2;
ステップ15
15次正解
grid-column: 2 / -1;
grid-row: 1 / -1;
ステップ16
グリッド要素のサイズと位置を指定します.
grid-area:grid-row-start値/grid-column-start値/grid-row-end値/grid-column値
16次正解
grid-area: 1 / 2 / 4 / -1;
ステップ17
17次正解
grid-area: 2 / 3 / 5 / -1;
ステップ18
グリッド要素の順序を指定します. integer:正、負の整数を設定可能 18階正解
order: 1;
ステップ19
19階正解
order: -1;
ステップ20
グリッドの列(column)のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の列(列)を指定するときに を使用します. fr:空き領域を共有して割り当て 手順20正解
grid-template-columns: 50%;
ステップ21
21階正解
grid-template-columns: repeat(8, 12.5%);
ステップ22
ステップ22が正しい
grid-template-columns: 100px 3em 40%;
ステップ23
23階正解
grid-template-columns: 1fr 5fr;
ステップ24
ステップ24が正しい
grid-template-columns: 50px repeat(3, 1fr) 50px;
ステップ25
25階正解
grid-template-columns: 75px 1.5fr 1fr;
ステップ26
グリッドの行のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の行(行)を指定するときに を使用します. fr:空き領域を共有して割り当て 26階正解
grid-template-rows: 12.5px 12.5px 12.5px 12.5px auto;
ステップ27
グリッドの行(row)と列(column)のサイズと名前を指定します.
grid-template:grid-template-rows値/grid-template-columns値
ステップ27が正しい
grid-template: 60% / 200px;
ステップ28
ステップ28が正しい
grid-template: auto 50px / 1fr 4fr;
grid-column-start: -3; 手順7正解
grid-column-end: span 2;ステップ8
手順8正解
grid-column-end: span 5;
ステップ9
9階正解
grid-column-start: span 3;
ステップ10
グリッド要素の列(column)の位置を指定します.
grid-column:grid-column-start値/grid-column-end値spanキーワードを使用することもできます.
手順10正解
grid-column: -3 / -1;
ステップ11
11階正解
grid-column: 2 / span 3;
ステップ12
グリッド要素の開始行(row)の位置を指定します. integer:正、負の整数を設定可能 span整数:spanは正の値 にのみ設定できます.
十二次正解
grid-row-start: 3;
ステップ13
グリッド要素の行(row)の位置を指定します.
grid-row:grid-row-start値/grid-row-end値spanキーワードを使用することもできます.
13階が正しい
grid-row: 3 / -1;
ステップ14
14次正解
grid-row: -1 / -2;
grid-column: 2;
ステップ15
15次正解
grid-column: 2 / -1;
grid-row: 1 / -1;
ステップ16
グリッド要素のサイズと位置を指定します.
grid-area:grid-row-start値/grid-column-start値/grid-row-end値/grid-column値
16次正解
grid-area: 1 / 2 / 4 / -1;
ステップ17
17次正解
grid-area: 2 / 3 / 5 / -1;
ステップ18
グリッド要素の順序を指定します. integer:正、負の整数を設定可能 18階正解
order: 1;
ステップ19
19階正解
order: -1;
ステップ20
グリッドの列(column)のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の列(列)を指定するときに を使用します. fr:空き領域を共有して割り当て 手順20正解
grid-template-columns: 50%;
ステップ21
21階正解
grid-template-columns: repeat(8, 12.5%);
ステップ22
ステップ22が正しい
grid-template-columns: 100px 3em 40%;
ステップ23
23階正解
grid-template-columns: 1fr 5fr;
ステップ24
ステップ24が正しい
grid-template-columns: 50px repeat(3, 1fr) 50px;
ステップ25
25階正解
grid-template-columns: 75px 1.5fr 1fr;
ステップ26
グリッドの行のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の行(行)を指定するときに を使用します. fr:空き領域を共有して割り当て 26階正解
grid-template-rows: 12.5px 12.5px 12.5px 12.5px auto;
ステップ27
グリッドの行(row)と列(column)のサイズと名前を指定します.
grid-template:grid-template-rows値/grid-template-columns値
ステップ27が正しい
grid-template: 60% / 200px;
ステップ28
ステップ28が正しい
grid-template: auto 50px / 1fr 4fr;
grid-column-end: span 5; 9階正解
grid-column-start: span 3;ステップ10
グリッド要素の列(column)の位置を指定します.
grid-column:grid-column-start値/grid-column-end値spanキーワードを使用することもできます.
手順10正解
grid-column: -3 / -1;
ステップ11
11階正解
grid-column: 2 / span 3;
ステップ12
グリッド要素の開始行(row)の位置を指定します. integer:正、負の整数を設定可能 span整数:spanは正の値 にのみ設定できます.
十二次正解
grid-row-start: 3;
ステップ13
グリッド要素の行(row)の位置を指定します.
grid-row:grid-row-start値/grid-row-end値spanキーワードを使用することもできます.
13階が正しい
grid-row: 3 / -1;
ステップ14
14次正解
grid-row: -1 / -2;
grid-column: 2;
ステップ15
15次正解
grid-column: 2 / -1;
grid-row: 1 / -1;
ステップ16
グリッド要素のサイズと位置を指定します.
grid-area:grid-row-start値/grid-column-start値/grid-row-end値/grid-column値
16次正解
grid-area: 1 / 2 / 4 / -1;
ステップ17
17次正解
grid-area: 2 / 3 / 5 / -1;
ステップ18
グリッド要素の順序を指定します. integer:正、負の整数を設定可能 18階正解
order: 1;
ステップ19
19階正解
order: -1;
ステップ20
グリッドの列(column)のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の列(列)を指定するときに を使用します. fr:空き領域を共有して割り当て 手順20正解
grid-template-columns: 50%;
ステップ21
21階正解
grid-template-columns: repeat(8, 12.5%);
ステップ22
ステップ22が正しい
grid-template-columns: 100px 3em 40%;
ステップ23
23階正解
grid-template-columns: 1fr 5fr;
ステップ24
ステップ24が正しい
grid-template-columns: 50px repeat(3, 1fr) 50px;
ステップ25
25階正解
grid-template-columns: 75px 1.5fr 1fr;
ステップ26
グリッドの行のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の行(行)を指定するときに を使用します. fr:空き領域を共有して割り当て 26階正解
grid-template-rows: 12.5px 12.5px 12.5px 12.5px auto;
ステップ27
グリッドの行(row)と列(column)のサイズと名前を指定します.
grid-template:grid-template-rows値/grid-template-columns値
ステップ27が正しい
grid-template: 60% / 200px;
ステップ28
ステップ28が正しい
grid-template: auto 50px / 1fr 4fr;
グリッド要素の列(column)の位置を指定します.
grid-column:grid-column-start値/grid-column-end値
spanキーワードを使用することもできます.手順10正解
grid-column: -3 / -1;ステップ11
11階正解
grid-column: 2 / span 3;
ステップ12
グリッド要素の開始行(row)の位置を指定します. integer:正、負の整数を設定可能 span整数:spanは正の値 にのみ設定できます.
十二次正解
grid-row-start: 3;
ステップ13
グリッド要素の行(row)の位置を指定します.
grid-row:grid-row-start値/grid-row-end値spanキーワードを使用することもできます.
13階が正しい
grid-row: 3 / -1;
ステップ14
14次正解
grid-row: -1 / -2;
grid-column: 2;
ステップ15
15次正解
grid-column: 2 / -1;
grid-row: 1 / -1;
ステップ16
グリッド要素のサイズと位置を指定します.
grid-area:grid-row-start値/grid-column-start値/grid-row-end値/grid-column値
16次正解
grid-area: 1 / 2 / 4 / -1;
ステップ17
17次正解
grid-area: 2 / 3 / 5 / -1;
ステップ18
グリッド要素の順序を指定します. integer:正、負の整数を設定可能 18階正解
order: 1;
ステップ19
19階正解
order: -1;
ステップ20
グリッドの列(column)のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の列(列)を指定するときに を使用します. fr:空き領域を共有して割り当て 手順20正解
grid-template-columns: 50%;
ステップ21
21階正解
grid-template-columns: repeat(8, 12.5%);
ステップ22
ステップ22が正しい
grid-template-columns: 100px 3em 40%;
ステップ23
23階正解
grid-template-columns: 1fr 5fr;
ステップ24
ステップ24が正しい
grid-template-columns: 50px repeat(3, 1fr) 50px;
ステップ25
25階正解
grid-template-columns: 75px 1.5fr 1fr;
ステップ26
グリッドの行のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の行(行)を指定するときに を使用します. fr:空き領域を共有して割り当て 26階正解
grid-template-rows: 12.5px 12.5px 12.5px 12.5px auto;
ステップ27
グリッドの行(row)と列(column)のサイズと名前を指定します.
grid-template:grid-template-rows値/grid-template-columns値
ステップ27が正しい
grid-template: 60% / 200px;
ステップ28
ステップ28が正しい
grid-template: auto 50px / 1fr 4fr;
grid-column: 2 / span 3; グリッド要素の開始行(row)の位置を指定します.
十二次正解
grid-row-start: 3;ステップ13
グリッド要素の行(row)の位置を指定します.
grid-row:grid-row-start値/grid-row-end値spanキーワードを使用することもできます.
13階が正しい
grid-row: 3 / -1;
ステップ14
14次正解
grid-row: -1 / -2;
grid-column: 2;
ステップ15
15次正解
grid-column: 2 / -1;
grid-row: 1 / -1;
ステップ16
グリッド要素のサイズと位置を指定します.
grid-area:grid-row-start値/grid-column-start値/grid-row-end値/grid-column値
16次正解
grid-area: 1 / 2 / 4 / -1;
ステップ17
17次正解
grid-area: 2 / 3 / 5 / -1;
ステップ18
グリッド要素の順序を指定します. integer:正、負の整数を設定可能 18階正解
order: 1;
ステップ19
19階正解
order: -1;
ステップ20
グリッドの列(column)のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の列(列)を指定するときに を使用します. fr:空き領域を共有して割り当て 手順20正解
grid-template-columns: 50%;
ステップ21
21階正解
grid-template-columns: repeat(8, 12.5%);
ステップ22
ステップ22が正しい
grid-template-columns: 100px 3em 40%;
ステップ23
23階正解
grid-template-columns: 1fr 5fr;
ステップ24
ステップ24が正しい
grid-template-columns: 50px repeat(3, 1fr) 50px;
ステップ25
25階正解
grid-template-columns: 75px 1.5fr 1fr;
ステップ26
グリッドの行のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の行(行)を指定するときに を使用します. fr:空き領域を共有して割り当て 26階正解
grid-template-rows: 12.5px 12.5px 12.5px 12.5px auto;
ステップ27
グリッドの行(row)と列(column)のサイズと名前を指定します.
grid-template:grid-template-rows値/grid-template-columns値
ステップ27が正しい
grid-template: 60% / 200px;
ステップ28
ステップ28が正しい
grid-template: auto 50px / 1fr 4fr;
グリッド要素の行(row)の位置を指定します.
grid-row:grid-row-start値/grid-row-end値
spanキーワードを使用することもできます.13階が正しい
grid-row: 3 / -1;ステップ14
14次正解
grid-row: -1 / -2;
grid-column: 2;
ステップ15
15次正解
grid-column: 2 / -1;
grid-row: 1 / -1;
ステップ16
グリッド要素のサイズと位置を指定します.
grid-area:grid-row-start値/grid-column-start値/grid-row-end値/grid-column値
16次正解
grid-area: 1 / 2 / 4 / -1;
ステップ17
17次正解
grid-area: 2 / 3 / 5 / -1;
ステップ18
グリッド要素の順序を指定します. integer:正、負の整数を設定可能 18階正解
order: 1;
ステップ19
19階正解
order: -1;
ステップ20
グリッドの列(column)のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の列(列)を指定するときに を使用します. fr:空き領域を共有して割り当て 手順20正解
grid-template-columns: 50%;
ステップ21
21階正解
grid-template-columns: repeat(8, 12.5%);
ステップ22
ステップ22が正しい
grid-template-columns: 100px 3em 40%;
ステップ23
23階正解
grid-template-columns: 1fr 5fr;
ステップ24
ステップ24が正しい
grid-template-columns: 50px repeat(3, 1fr) 50px;
ステップ25
25階正解
grid-template-columns: 75px 1.5fr 1fr;
ステップ26
グリッドの行のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の行(行)を指定するときに を使用します. fr:空き領域を共有して割り当て 26階正解
grid-template-rows: 12.5px 12.5px 12.5px 12.5px auto;
ステップ27
グリッドの行(row)と列(column)のサイズと名前を指定します.
grid-template:grid-template-rows値/grid-template-columns値
ステップ27が正しい
grid-template: 60% / 200px;
ステップ28
ステップ28が正しい
grid-template: auto 50px / 1fr 4fr;
grid-row: -1 / -2;
grid-column: 2; 15次正解
grid-column: 2 / -1;
grid-row: 1 / -1;ステップ16
グリッド要素のサイズと位置を指定します.
grid-area:grid-row-start値/grid-column-start値/grid-row-end値/grid-column値
16次正解
grid-area: 1 / 2 / 4 / -1;
ステップ17
17次正解
grid-area: 2 / 3 / 5 / -1;
ステップ18
グリッド要素の順序を指定します. integer:正、負の整数を設定可能 18階正解
order: 1;
ステップ19
19階正解
order: -1;
ステップ20
グリッドの列(column)のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の列(列)を指定するときに を使用します. fr:空き領域を共有して割り当て 手順20正解
grid-template-columns: 50%;
ステップ21
21階正解
grid-template-columns: repeat(8, 12.5%);
ステップ22
ステップ22が正しい
grid-template-columns: 100px 3em 40%;
ステップ23
23階正解
grid-template-columns: 1fr 5fr;
ステップ24
ステップ24が正しい
grid-template-columns: 50px repeat(3, 1fr) 50px;
ステップ25
25階正解
grid-template-columns: 75px 1.5fr 1fr;
ステップ26
グリッドの行のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の行(行)を指定するときに を使用します. fr:空き領域を共有して割り当て 26階正解
grid-template-rows: 12.5px 12.5px 12.5px 12.5px auto;
ステップ27
グリッドの行(row)と列(column)のサイズと名前を指定します.
grid-template:grid-template-rows値/grid-template-columns値
ステップ27が正しい
grid-template: 60% / 200px;
ステップ28
ステップ28が正しい
grid-template: auto 50px / 1fr 4fr;
グリッド要素のサイズと位置を指定します.
grid-area:grid-row-start値/grid-column-start値/grid-row-end値/grid-column値
16次正解
grid-area: 1 / 2 / 4 / -1;ステップ17
17次正解
grid-area: 2 / 3 / 5 / -1;
ステップ18
グリッド要素の順序を指定します. integer:正、負の整数を設定可能 18階正解
order: 1;
ステップ19
19階正解
order: -1;
ステップ20
グリッドの列(column)のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の列(列)を指定するときに を使用します. fr:空き領域を共有して割り当て 手順20正解
grid-template-columns: 50%;
ステップ21
21階正解
grid-template-columns: repeat(8, 12.5%);
ステップ22
ステップ22が正しい
grid-template-columns: 100px 3em 40%;
ステップ23
23階正解
grid-template-columns: 1fr 5fr;
ステップ24
ステップ24が正しい
grid-template-columns: 50px repeat(3, 1fr) 50px;
ステップ25
25階正解
grid-template-columns: 75px 1.5fr 1fr;
ステップ26
グリッドの行のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の行(行)を指定するときに を使用します. fr:空き領域を共有して割り当て 26階正解
grid-template-rows: 12.5px 12.5px 12.5px 12.5px auto;
ステップ27
グリッドの行(row)と列(column)のサイズと名前を指定します.
grid-template:grid-template-rows値/grid-template-columns値
ステップ27が正しい
grid-template: 60% / 200px;
ステップ28
ステップ28が正しい
grid-template: auto 50px / 1fr 4fr;
grid-area: 2 / 3 / 5 / -1; グリッド要素の順序を指定します.
18階正解
order: 1;ステップ19
19階正解
order: -1;
ステップ20
グリッドの列(column)のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の列(列)を指定するときに を使用します. fr:空き領域を共有して割り当て 手順20正解
grid-template-columns: 50%;
ステップ21
21階正解
grid-template-columns: repeat(8, 12.5%);
ステップ22
ステップ22が正しい
grid-template-columns: 100px 3em 40%;
ステップ23
23階正解
grid-template-columns: 1fr 5fr;
ステップ24
ステップ24が正しい
grid-template-columns: 50px repeat(3, 1fr) 50px;
ステップ25
25階正解
grid-template-columns: 75px 1.5fr 1fr;
ステップ26
グリッドの行のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の行(行)を指定するときに を使用します. fr:空き領域を共有して割り当て 26階正解
grid-template-rows: 12.5px 12.5px 12.5px 12.5px auto;
ステップ27
グリッドの行(row)と列(column)のサイズと名前を指定します.
grid-template:grid-template-rows値/grid-template-columns値
ステップ27が正しい
grid-template: 60% / 200px;
ステップ28
ステップ28が正しい
grid-template: auto 50px / 1fr 4fr;
order: -1; グリッドの列(column)のサイズと名前を指定します.
手順20正解
grid-template-columns: 50%;ステップ21
21階正解
grid-template-columns: repeat(8, 12.5%);
ステップ22
ステップ22が正しい
grid-template-columns: 100px 3em 40%;
ステップ23
23階正解
grid-template-columns: 1fr 5fr;
ステップ24
ステップ24が正しい
grid-template-columns: 50px repeat(3, 1fr) 50px;
ステップ25
25階正解
grid-template-columns: 75px 1.5fr 1fr;
ステップ26
グリッドの行のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の行(行)を指定するときに を使用します. fr:空き領域を共有して割り当て 26階正解
grid-template-rows: 12.5px 12.5px 12.5px 12.5px auto;
ステップ27
グリッドの行(row)と列(column)のサイズと名前を指定します.
grid-template:grid-template-rows値/grid-template-columns値
ステップ27が正しい
grid-template: 60% / 200px;
ステップ28
ステップ28が正しい
grid-template: auto 50px / 1fr 4fr;
grid-template-columns: repeat(8, 12.5%); ステップ22が正しい
grid-template-columns: 100px 3em 40%;ステップ23
23階正解
grid-template-columns: 1fr 5fr;
ステップ24
ステップ24が正しい
grid-template-columns: 50px repeat(3, 1fr) 50px;
ステップ25
25階正解
grid-template-columns: 75px 1.5fr 1fr;
ステップ26
グリッドの行のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の行(行)を指定するときに を使用します. fr:空き領域を共有して割り当て 26階正解
grid-template-rows: 12.5px 12.5px 12.5px 12.5px auto;
ステップ27
グリッドの行(row)と列(column)のサイズと名前を指定します.
grid-template:grid-template-rows値/grid-template-columns値
ステップ27が正しい
grid-template: 60% / 200px;
ステップ28
ステップ28が正しい
grid-template: auto 50px / 1fr 4fr;
grid-template-columns: 1fr 5fr; ステップ24が正しい
grid-template-columns: 50px repeat(3, 1fr) 50px;ステップ25
25階正解
grid-template-columns: 75px 1.5fr 1fr;
ステップ26
グリッドの行のサイズと名前を指定します. length(px, em ...) percentage(%) flex max-content min-content minmax(min, max) repeat関数:同じ幅の行(行)を指定するときに を使用します. fr:空き領域を共有して割り当て 26階正解
grid-template-rows: 12.5px 12.5px 12.5px 12.5px auto;
ステップ27
グリッドの行(row)と列(column)のサイズと名前を指定します.
grid-template:grid-template-rows値/grid-template-columns値
ステップ27が正しい
grid-template: 60% / 200px;
ステップ28
ステップ28が正しい
grid-template: auto 50px / 1fr 4fr;
grid-template-columns: 75px 1.5fr 1fr; グリッドの行のサイズと名前を指定します.
26階正解
grid-template-rows: 12.5px 12.5px 12.5px 12.5px auto;ステップ27
グリッドの行(row)と列(column)のサイズと名前を指定します.
grid-template:grid-template-rows値/grid-template-columns値
ステップ27が正しい
grid-template: 60% / 200px;
ステップ28
ステップ28が正しい
grid-template: auto 50px / 1fr 4fr;
グリッドの行(row)と列(column)のサイズと名前を指定します.
grid-template:grid-template-rows値/grid-template-columns値
ステップ27が正しい
grid-template: 60% / 200px;ステップ28
ステップ28が正しい
grid-template: auto 50px / 1fr 4fr;
grid-template: auto 50px / 1fr 4fr;Reference
この問題について(Grid Garden), 我々は、より多くの情報をここで見つけました https://velog.io/@yeonlisa/Grid-Gardenテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol