Skip to content

Fix typos in CSS Grid tutorial #290

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fauzan171 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix typos in CSS Grid tutorial #290

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 23 additions & 24 deletions CSS/057 CSS Grid/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ artinya, kita akan memberikan 3 buah _baris_ pada element class `container`.
```css
.container {
display: grid;
grid-template-column: 3px auto 30%;
grid-template-columns: 3px auto 30%;
grid-template-rows: 1fr 1fr 1fr;
}
```
Expand All @@ -172,7 +172,7 @@ Cara Penulisan Kodenya adalah:
```css
.container {
display: grid;
grid-template-column: 3px auto;
grid-template-columns: 3px auto;
grid-auto-columns: 100px;
}
```
Expand Down Expand Up @@ -202,7 +202,7 @@ Cara penulisan kodenya adalah:
```css
.container {
display: grid;
grid-template-column: 30px 30px;
grid-template-columns: 30px 30px;
grid-auto-flow: column;
}
```
Expand All @@ -223,7 +223,7 @@ Cara penulisan kodenya adalah:
```css
.container {
display: grid;
grid-template-column: 30px 30px;
grid-template-columns: 30px 30px;
grid-template-areas: "nav nav nav" "side main main" "side footer footer";
}
```
Expand All @@ -237,7 +237,7 @@ Cara penulisan kodenya adalah:
```css
.container {
display: grid;
grid-template-column: 30px 30px;
grid-template-columns: 30px 30px;
grid-template-areas: "nav nav nav" "side main main" "side footer footer";
}

Expand Down Expand Up @@ -273,7 +273,7 @@ Cara penulisan kodenya adalah:
```

artinya, kita akan membuat 2 buah baris berukuran masing-masing 30px dan 3 buah kolom berukuran masing-masing 1fr.
Ingat, dalam penulisan `grid-template` ini urutan pertama harus `grid-template-rows` baru `grid-template-column`.
Ingat, dalam penulisan `grid-template` ini urutan pertama harus `grid-template-rows` baru `grid-template-columns`.

- `grid-column-gap`
**adalah properti untuk mengatur jarak (gap) antar kolom**.
Expand All @@ -283,7 +283,7 @@ Cara penulisan kodenya adalah:
```css
.container {
display: grid;
grid-template-column: 3px auto 30%;
grid-template-columns: 3px auto 30%;
grid-column-gap: 10px;
}
```
Expand All @@ -298,7 +298,7 @@ Cara penulisan kodenya adalah:
```css
.container {
display: grid;
grid-template-column: 3px auto 30%;
grid-template-columns: 3px auto 30%;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
Expand All @@ -314,15 +314,15 @@ Cara penulisan kodenya adalah:
```css
.container {
display: grid;
grid-template-column: 3px auto 30%;
grid-template-columns: 3px auto 30%;
grid-template-rows: 1fr 1fr 1fr;
gap: 10px;
}
```

artinya, anda akan memberikan jarak antar kolom dan baris sebesar `10px`, namun dengan penulisan yang lebih mudah dan singkat dibandingkan dengan kedua properti sebelumnya.

- `jusify-items`
- `justify-items`
**Yaitu properti untuk _mensejajarkan items_ secara _horizontal_ (dari kanan ke kiri), dimana properti ini memiliki 4 yaitu `start`, `end`, `center` dan `stretch` dimana `stretch` adalah nilai defaultnya.**

PENJELASAN:
Expand All @@ -337,7 +337,7 @@ Cara penulisan kodenya adalah:
.container {
display: grid;
justify-items: center;
grid-template-column: 3px auto 30%;
grid-template-columns: 3px auto 30%;
grid-template-rows: 1fr 1fr 1fr;
gap: 10px;
}
Expand All @@ -360,7 +360,7 @@ Cara penulisan kodenya adalah:
.container {
display: grid;
align-items: center;
grid-template-column: 3px auto 30%;
grid-template-columns: 3px auto 30%;
grid-template-rows: 1fr 1fr 1fr;
gap: 10px;
}
Expand All @@ -383,13 +383,13 @@ Cara penulisan kodenya adalah:
.container {
display: grid;
place-items: center;
grid-template-column: 3px auto 30%;
grid-template-columns: 3px auto 30%;
grid-template-rows: 1fr 1fr 1fr;
gap: 10px;
}
```

- `jusify-content`
- `justify-content`
**Yaitu properti untuk _mengatur_ seluruh _grid-container_ secara _horizontal_ (dari kanan ke kiri) namun dengan _syarat_ ukuran total _grid_ nya harus lebih kecil dari ukuran _container_ nya dan ketika grid _items_ nya menggunakan ukuran fixed (px). Properti ini memiliki 7 value yaitu `start`, `end`, `center`, `stretch`, `space-around`, `space-between` dan `space-evenly` dimana `stretch` adalah nilai defaultnya.**

PENJELASAN:
Expand All @@ -407,7 +407,7 @@ Cara penulisan kodenya adalah:
.container {
display: grid;
justify-content: center;
grid-template-column: 3px auto 30%;
grid-template-columns: 3px auto 30%;
grid-template-rows: 1fr 1fr 1fr;
gap: 10px;
}
Expand All @@ -433,7 +433,7 @@ Cara penulisan kodenya adalah:
.container {
display: grid;
align-content: center;
grid-template-column: 3px auto 30%;
grid-template-columns: 3px auto 30%;
grid-template-rows: 1fr 1fr 1fr;
gap: 10px;
}
Expand All @@ -459,7 +459,7 @@ Cara penulisan kodenya adalah:
.container {
display: grid;
place-content: center;
grid-template-column: 3px auto 30%;
grid-template-columns: 3px auto 30%;
grid-template-rows: 1fr 1fr 1fr;
gap: 10px;
}
Expand Down Expand Up @@ -541,8 +541,7 @@ yang artinya adalah item tersebut dimulai dari _baris_ 2, berakhir di _kolom_ 1,
- `align-self`
**Yaitu untuk mengatur posisi item pada sebuah _cell_ terhadap sumbu _vertical_ dengan value `start`, `end`, `center` dan `stretch`.**

- `align-self`
**Yaitu untuk mengatur posisi item pada sebuah _cell_ terhadap sumbu _vertical dan horizontal_ dengan value `start`, `end`, `center` dan `stretch`.**
- `place-self`

### MATERI TAMBAHAN

Expand All @@ -565,7 +564,7 @@ _sebelum menggunakan repeat()_
```css
.container {
display: grid;
grid-template-colums: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
```

Expand All @@ -574,7 +573,7 @@ _sesudah menggunakan repeat()_
```css
.container {
display: grid;
grid-template-colums: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}
```

Expand All @@ -588,7 +587,7 @@ Contoh kodenya adalah:
```css
.container {
display: grid;
grid-template-colums: 1fr min-content 3fr;
grid-template-columns: 1fr min-content 3fr;
}
```

Expand All @@ -600,7 +599,7 @@ Contoh kodenya adalah:
```css
.container {
display: grid;
grid-template-colums: repeat(auto-fit, 3fr);
grid-template-columns: repeat(auto-fit, 3fr);
}
```

Expand All @@ -612,7 +611,7 @@ Contoh kodenya adalah:
```css
.container {
display: grid;
grid-template-colums: minmax(200px, 500px);
grid-template-columns: minmax(200px, 500px);
}
```

Expand Down