CSS Layout

Eko Kurniawan Khannedy

Eko Kurniawan Khannedy
● Technical architect at one of the biggest
ecommerce company in Indonesia
● 13+ years experiences
● www.programmerzamannow.com
● youtube.com/c/ProgrammerZamanNow
Eko Kurniawan Khannedy
● Telegram : @khannedy
● Linkedin : https://www.linkedin.com/company/programmer-zaman-now/
● Facebook : fb.com/ProgrammerZamanNow
● Instagram : instagram.com/programmerzamannow
● Youtube : youtube.com/c/ProgrammerZamanNow
● Telegram Channel : t.me/ProgrammerZamanNow
● Tiktok : https://tiktok.com/@programmerzamannow
● Email : [email protected]
Sebelum Belajar
● Kelas HTML dari Programmer Zaman Now
● Kelas CSS dari Programmer Zaman Now
Pengenalan CSS Layout
Pengenalan CSS Layout
● Di materi CSS Dasar, kita sudah belajar bagaimana menambahkan gaya pada
element-element di HTML
● Selain menambahkan gaya di element, CSS juga biasanya digunakan untuk membuat
layout (tata letak) halaman web
● Hampir semua web di dunia, akan menggunakan CSS untuk melakukan layouting
(tata letak) komponen-komponen HTML nya
● Salah satu tujuan melakukan tata letak adalah agar tampilan halaman web lebih
menarik
Jangan Gunakan Tabel untuk Layout
● Kadang mungkin ada beberapa pengembang web menggunakan Tabel untuk
membuat tata letak, karena dianggap lebih mudah
● Namun, sangat tidak disarankan untuk menggunakan tabel, terutama pada kondisi
layout yang sangat kompleks, maka akan sangat menyulitkan
Membuat Project
Membuat Project
● Silahkan buat folder baru untuk menyimpan kode program belajar kita
● Misal nama foldernya belajar-css-layout
● Silahkan buka menggunakan Text Editor yang digunakan, misal Visual Studio Code
Normal Flow
Normal Flow
● Normal Flow adalah bagaimana Web Browser menampilkan tata letak halaman
HTML secara default, ketika kita tidak mengubah apapun pada tata letak nya
● Secara default, jika kita tidak menambahkan layout CSS sama sekali, maka Web
Browser akan menampilkan halaman Web dalam Normal Flow
● Biasanya setiap Web Browser hampir memiliki Normal Flow yang sama
Kode : Contoh
Urutan Komponen HTML
● Secara default, Web Browser akan menampilkan urutan sesuai dengan posisi kode
HTML yang dibuat
● Walaupun kita tambahkan Style menggunakan CSS pada komponen HTML nya,
tetap saja, urutan nya secara default akan mengikuti urutan sesuai kode HTML yang
kita buat
Kode : Normal Flow CSS
Kenapa Tidak Cukup dengan Normal Flow?
● Untuk membuat halaman yang menarik, kadang butuh tata letak yang tidak bisa
sesuai dengan Normal Flow
● Kadang kita butuh meletakkan beberapa posisi komponen ditempat yang kita
inginkan, sehingga tidak bisa jika mengikuti aturan Normal Flow
● Contoh jika kita buka website www.programmerzamannow.com
● Maka kita bisa lihat bahwa tata letak komponen tidak ditampilkan secara Normal
Flow
Web Programmer Zaman Now
Display
Display
● Sebelum kita belajar melakukan tata letak, kita perlu bahas ulang tentang Display
● Kita tahu bahwa komponen di HTML memiliki default display, ada yang block dan
ada yang inline
● Sebenarnya, kita bisa mengubah nilai display untuk komponen HTML menggunakan
atribut display di CSS
● https://developer.mozilla.org/en-US/docs/Web/CSS/display
Nilai CSS Display
● inline, artinya komponen ditampilkan secara inline (hanya mengambil tempat
secukupnya)
● block, artinya komponen ditampilkan secara block (mengambil tempat kiri ke kanan
komponen diatasnya)
● inline-block, artinya komponen ditampilkan secara inline, tapi kita bisa mengubah
tinggi dan lebar komponennya seperti layaknya block
● none, artinya komponen akan dihapus dan tidak ditampilkan
Kode : Display HTML
Kode : Display CSS
Flexbox
Flexbox
● Flexbox Layout bertujuan untuk menyediakan cara yang lebih efisien untuk menata
letak, menyelaraskan, dan mendistribusikan ruang antar item dalam wadah
(container), bahkan ketika ukurannya tidak diketahui dan/atau dinamis (sehingga
disebut “fleksibel”).
● Flexbox Layout paling sesuai untuk komponen aplikasi, dan tata letak skala kecil,
sedangkan Grid Layout ditujukan untuk tata letak skala besar.
● Grid Layout akan dibahas di materi tersendiri
Diagram Flexbox
Flex Container
● Untuk membuat Flex Container, kita bisa menggunakan display value flex
● Semua child element yang terdapat di dalam Flex Container, maka kita sebut sebagai
Flex Item
Kode : Flexbox
Flex Direction
● Secara default, Flex Item akan ditampilkan dengan arah dari kiri ke kanan, kita bisa
mengubah dengan atribut flex-direction :
● https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
Kode : Flex Direction
Flex Wrap
● Secara default, Flex Item akan ditampilkan dalam satu garis, baik itu vertical (row)
atau horizontal (column)
● Namun jika kita ingin Flex Item di wrap pada garis berbeda ketika dibutuhkan, maka
kita bisa gunakan atribut flex-wrap
● https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
Kode : Flex Wrap
Flex Items
Flex Items
● Komponen yang terdapat di dalam Flex Container, kita sebut dengan nama Flex Item
● Selain melakukan pengaturan ke Flex Container, kita juga bisa melakukan
pengaturan ke Flex Item
Order
● Secara default urutan Flex Item akan ditampilkan sesuai dengan urutan kode HTML
yang dibuat
● Namun, jika kita ingin mengubah urutan ditampilkannya, kita bisa menggunakan
atribut order
● https://developer.mozilla.org/en-US/docs/Web/CSS/order
Kode : Flex Item Order
Flex Grow
● Atribut flex-grow mendefinisikan kemampuan item fleksibel untuk berkembang jika
diperlukan.
● Atribut flex-grow menerima nilai yang berfungsi sebagai proporsi dari total.
● Ini menentukan jumlah ruang yang tersedia di dalam wadah fleksibel yang harus
digunakan oleh item tersebut.
● Misal kita punya 5 Flex Item, dimana total dari 5 Flex Item tersebut memiliki jumlah
flex-grow 20, artinya per 1 grow adalah 100% / 20 = 5%
● Sehingga Flex Item yang memiliki nilai flex-grow 2 artinya memiliki ruang sebesar
10%
● https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
Kode : Flex Grow
Flex Shrink
● Jika flex-grow merupakan kemampuan untuk Flex Item untuk berkembang, maka
atribut flex-shrink untuk menyusut ketika dibutuhkan
● Biasanya kemampuan untuk menyusut dibutuhkan ketika memang ukuran halaman
tidak cukup, dan kita bisa mengatur nilai factor dari penyusutannya antar Flex Item,
sama seperti flex-grow
● https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
Kode : Flex Shrink
Flex Basis
● Atribut flex-basis digunakan untuk membuat Flex Item mengambil ruang sebesar
yang ditentukan, atau jika ruangan tidak tersedia, ambil semampunya
● Jika kita menggunakan flex-shrink : 0, maka akan dipastikan bahwa Flex Item akan
mengambil sejumlah flex-basis, walaupun ukuran layar tidak mencukupi
● https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
Kode : Flex Basis
Flex Alignment
Flex Alignment
● Flex Item yang terdapat di dalam Flex Container, bisa kita rapikan atau selaraskan
dengan beberapa atribut
Justify Content
● Saat kita menggunakan Flexbox, kita bisa
menggunakan atribut justify-content menentukan
bagaimana Web Browser menentukan jarak antar
Flex Item
● Ada banyak nilai yang bisa kita gunakan dalam
justify-content, seperti yang terlihat di gambar
● https://developer.mozilla.org/en-US/docs/Web/C
SS/justify-content
Kode : Justify Content
Align Items
● Atribut align-items bisa digunakan untuk
perataan Flex Item secara cross-axis
● https://developer.mozilla.org/en-US/docs/
Web/CSS/align-items
Kode : Flex Align Items
Align Content
● Atribut align-content digunakan agar
menyelaraskan Flex Item seperti justify-
content
● Namun pada align-content, ini hanya bisa
dilakukan jika menggunakan flex-wrap
dengan nilai wrap atau wrap-reverse
● https://developer.mozilla.org/en-US/docs/W
eb/CSS/align-content
Kode : Align Content
Gap
● Sebelumnya, untuk menambahkan gap (jarak) antar Flex Item, kita biasanya
menggunakan margin
● Saat menggunakan Flexbox, lebih baik gunakan Gap untuk menentukan jarak dalam
row (baris) atau column (kolom)
● https://developer.mozilla.org/en-US/docs/Web/CSS/gap
● https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
● https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
Kode : Flex Gap
Grids
Grid
● Grid Layout adalah sistem tata letak berbasis grid dua dimensi
● Flexbox adalah Layout yang bagus, tapi hanya satu arah, dan cocok pada kasus
tertentu
● Grid Layout adalah fitur CSS yang dibuat untuk mengatasi permasalahan tata letak
yang kompleks
Grid Container
● Untuk membuat Grid Container, kita bisa menggunakan atribut display dengan nilai
grid
● Tidak seperti Flexbox, saat menggunakan Grid Container, secara default akan
terdapat satu kolom, sehingga tampilan awal mungkin tidak akan berbeda dengan
Normal Flow
Kode : Grid
Grid Terminology
Grid Terminology
● Sebelum kita lanjut tentang Grid Container, kita akan bahas dulu tentang Grid
Terminology, agar tidak bingung di materi selanjutnya
● Seperti yang sudah kita tahu, bentuk dari Grid itu mirip seperti tabel
Grid Container
● Komponent yang menggunakan display: grid, kita sebut dengan Grid Container
Grid Item
● Komponen Children dari Grid Container kita sebut dengan nama Grid Item
Grid Line
● Garis pemisah dalam grid baik itu
yang vertical atau horizontal, kita
sebut dengan Grid Line
Grid Cell
● Area yang terdapat didalam kolom
dan baris yang dipisah oleh Grid
Line, kita sebut dengan Grid Cell
Grid Track
● Bagian antara dua Grid Line, atau
bisa dibilang baris, kita sebut
dengan Grid Track
Grid Area
● Total area dari beberapa Grid Cell,
kita sebut dengan Grid Area
Grid Templates
Grid Template
● Untuk menentukan kolom dan baris dalam Grid, kita bisa menggunakan Grid
Template
● Atribut grid-template-columns digunakan untuk menentukan kolom
● https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
● Atribut grid-template-rows digunakan untuk menentukan baris
● https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
Grid Template
Grid Items
Grid Items
● Komponen Children langsung dari Grid Container kita sebut dengan Grid Item
● Ada banyak hal yang bisa kita lakukan di Grid Item, seperti memilih kolom, baris
atau area
Grid Item Start dan End
● Grid Item bisa ditentukan mau mulai dari kolom atau baris berapa
● Bahkan, untuk mempermudah, ketika membuat row template dan column template,
kita bisa memberi nama sehingga mudah digunakan
● https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start
● https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end
● https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start
● https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end
Grid Line Name
● Sebelum kita praktek tentang Grid Start dan End, kadang ada baiknya kita membuat
nama untuk Grid Line saat membuat Grid Template
● Kita bisa buat Grid Line dengan menggunakan [namaline]
Kode : Grid Line Name
Kode : Grid Item Start dan End
Grid Area
● Saat kita membuat Grid, kita bisa membuat Grid Area dengan menentukan nama dari
Grid Area tersebut
● Untuk membuat Grid Area, kita bisa menggunakan atribut grid-template-areas
● https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
● Dan untuk menentukan Grid Item muncul di area mana, kita bisa gunakan atribut
grid-area
● https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area
● Penggunaan Grid Area lebih mudah dibanding Grid Item Start dan End
Kode : Grid Template Area
Grid Alignment
Grid Alignment
● Grid juga sama seperti Flexbox, kita bisa lakukan penyelarasan seperti layaknya di
Flexbox
● Salah satu perbedaanya, dalam Grid, kita bisa melakukan penyelarasan Seluruh Grid
Cell, atau hanya untuk satu Grid Cell saja
Justify Content
● Saat kita menggunakan Grid, kita bisa menggunakan atribut justify-content
menentukan bagaimana Web Browser menentukan jarak antar Grid Column
● Ada banyak nilai yang bisa kita gunakan dalam justify-content, seperti yang terlihat
di gambar
● https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
Kode : Grid Justify Content
Align Content
● Atribut align-content digunakan agar menyelaraskan Grid Row seperti justify-content
● https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
Kode : Grid Align Content
Justify Items
● Justify Content akan melakukan penyelarasan seluruh Grid Item beserta Grid Line,
namun pada Justify Items, penyelasan hanya dilakukan di level Grid Item di dalam
Grid Cell, tanpa mengubah posisi Grid Line
● https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
Kode : Grid Justify Items
Align Items
● Align Items akan melakukan penyelarasan di level Grid Cell
● https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
Kode : Grid Align Items
Justify dan Align Self
● Sebelumnya untuk Justify Content / Items dan Align Content / Items, akan
berdampak ke semua Grid Item
● Namun jika kita ingin membuat Justify dan Align hanya untuk salah satu Grid Item,
kita bisa menggunakan Justify dan Align Self
● https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
● https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
Kode : Justify dan Align Self
Gap
● Gap, selain digunakan di Flexbox, juga bisa digunakan di Grid
● Tujuannya juga sama, untuk menambah jarak antar Grid Cell
● https://developer.mozilla.org/en-US/docs/Web/CSS/gap
● https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
● https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
Kode : Grid Gap
Subgrid
Subgrid
● Saat kita membuat tata letak yang sangat kompleks, kadang kita sering menjadikan
Grid Item menjadi Grid Container lagi
● Pada kasus tertentu, walaupun Grid Item tersebut merupakan Grid Container, namun
kadang kita ingin aturan row dan column nya ingin mengikuti aturan Grid Container
yang ada diatasnya
● Pada kasus seperti ini, kita bisa menggunakan Subgrid
Kode : Grid di dalam Grid
Kode : Subgrid
Multiple Column
Multiple Column
● Multiple column layout adalah cara untuk membuat tata letak seperti kolom dalam
koran
● Cara untuk membuat column adalah dengan menggunakan attribute column-count
● https://developer.mozilla.org/en-US/docs/Web/CSS/column-count
● Atau jika kita ingin menentukan lebar kolom, tanpa peduli jumlah kolom yang akan
dibuat, kita bisa gunakan atribut column-width
● https://developer.mozilla.org/en-US/docs/Web/CSS/column-width
Kode : Multiple Column
Column Style
● Kita juga bisa mengubah Style untuk Column
● Atribut column-gap untuk mengatur jarak Column
● https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
● Atribut column-rule untuk mengatur border dari Column
● https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule
Kode : Column Style
Float
Float
● CSS memiliki atribut float, yang sebelum ada Flexbox dan Grid, dulu Float biasanya
digunakan untuk membuat Layout
● Atribut float digunakan untuk memposisikan elemen pada web, sekarang biasanya
digunakan untuk gambar
● https://developer.mozilla.org/en-US/docs/Web/CSS/float
Kode : Float
Positioning
Positioning
● Positioning memungkinkan kita meletakkan posisi elemen di tempat yang tidak
sesuai dengan Normal Flow
● Misal meletakkan elemen di atas elemen lain, atau meletakkan elemen di posisi yang
selalu sama di Viewport browser
● Untuk mengubah posisi elemen, kita bisa menggunakan atribut position
● https://developer.mozilla.org/en-US/docs/Web/CSS/position
● Secara default, position bernilai static, artinya dia akan ditempatkan sesuai dengan
Normal Flow
Top, Bottom, Left dan Right
● Jika kita ubah atribut position dari default value-nya, kita bisa mengatur elemen
menggunakan atribut top, bottom, left dan right
● https://developer.mozilla.org/en-US/docs/Web/CSS/top
● https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
● https://developer.mozilla.org/en-US/docs/Web/CSS/left
● https://developer.mozilla.org/en-US/docs/Web/CSS/right
Relative Positioning
● Relative positioning adalah posisi mirip seperti static positioning, dimana element
akan ditempatkan sesuai Normal Flow.
● Namun setelah ditempatkan, kita bisa mengubah posisi elemen.
● Pada static positioning, mengubah posisi tidak akan berdampak apapun
Kode : Relative Positioning
Absolute Positioning
● Absolute positioning adalah menghapus elemen dari Normal Flow, bahkan tidak ada
space yang digunakan sama sekali
● Posisi awal untuk elemen absolute adalah relative ke posisi terdekat dengan elemen
sebelumnya, atau jika tidak ada, berarti di awal block element parent nya
● Jika elemen absolute tidak memiliki parent, maka parent nya adalah html
Kode : Absolute Positioning
Z-Index
● Saat kita menggunakan Relative dan Absolute Positioning, yang mulai mengganggu
adalah elemen akan saling bertumpuk
● Secara default saat menggunakan relative dan absolute, maka posisi akan diatas
element yang static, tapi bagaimana jika ternyata kita ingin mengubah posisi
tumpukan?
● Untuk mengubah posisi tumpukan elemen, kita bisa menggunakan atribut z-index,
yang secara default bernilai auto atau 0
● Semakin tinggi nilai z-index, artinya posisi akan semakin diatas
● https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Kode : Absolute Positioning dengan Z-Index
Fixed Positioning
● Fixed positioning adalah menghapus elemen dari Normal Flow, bahkan tidak ada
space yang digunakan sama sekali, jadi sama seperti Absolute positioning
● Posisi awal untuk elemen absolute adalah relative ke posisi terdekat dengan elemen
sebelumnya, atau jika tidak ada, berarti di awal block element parent nya
● Namun yang membedakan dari Absolute adalah, perubahan posisi pada element
fixed, dia akan relative ke viewport (halaman web yang terlihat)
● Oleh karena itu, jika halaman web kita scroll, maka elemen fixed akan diam
ditempat, dan tidak akan mengikuti scroll
Kode : Fixed Positioning
Sticky Positioning
● Sticky positioning adalah gabungan antara relative dan fixed position
● Sticky positioning akan menampilkan elemen seperti relative positioning, yang
artinya dalam Normal Flow, namun ketika elemen di scroll dalam ambang batas yang
sudah disesuaikan, maka otomatis akan menjadi fixed positioning
Kode : Sticky Positioning
Fraction Unit
Fraction Unit
● Saat kita membuat layout, kadang kita akan sering menggunakan satuan unit bernama
fr (fraction)
● Fraction adalah sisa ruang dalam Grid, sisa ruang biasanya adalah sisa ruang yang
bisa diisi setelah di kurangan Grid Item yang tidak flexible (ukurannya sudah fix)
● Cara perhitungan fr mirip dengan flex-grow, dimana ukurannya akan dihitung dari
total fr
● Misal jika sisa ruang adalah 1000px, dan total fr adalah 20fr, maka 1 pr bernilai 50px
Kode : Fraction Unit
Media Queries
Media Queries
● Media Queries adalah fitur di CSS yang bisa digunakan untuk memodifikasi tampilan
web sesuai dengan kondisi Device, Web Browser atau System Setting milik
pengguna
● Seperti yang kita tahu, saat membuat web, pastinya kita tahu bahwa perangkat
pengguna pasti berbeda-beda, ada yang membuat web kita dari Smartphone, Laptop,
Komputer, bahkan ukuran layarnya bisa berbeda-beda
● Oleh karena itu kadang mungkin kita ingin mengubah tampilan sesuai dengan kondisi
perangkat pengguna
Menggunakan Media Queries
● Untuk menggunakan Media Queries, kita bisa lakukan di HTML ketika
menggunakan file CSS yang berbeda
● Atau bisa langsung menggunakan @media di file CSS yang kita buat
● Kita akan coba praktekan dua-dua nya
● https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_medi
a_queries
Kode : HTML Media Query
Kode : Large CSS
Kode : Small CSS
@media
● Selain menggunakan Media Query di HTML, kita juga bisa langsung menggunakan
Media Query di file CSS menggunakan at-rule @media
● At-rule @media memiliki aturan penulisan seperti berikut :

@media MediaType Operator MediaFeature Operator MediaFeature

@media Rule
● Untuk Media Type, kita bisa lihat disini untuk daftar yang tersedia :
https://www.w3.org/TR/CSS21/media.html
● Dan untuk Media Feature, kita bisa melihat disini untuk daftar yang tersedia :
https://web.dev/learn/design/media-features
● Dan untuk Operator terdapat tiga pilihan :
○ and untuk kombinasi beberapa media feature, dan semua media feature wajib
terpenuhi
○ or, menggunakan , (koma), untuk kombinasi beberapa media feature yang hanya
wajib salah satunya
○ not untuk menyatakan tidak boleh memenuhi aturan media feature yang ditentukan
Kode : CSS Media Query
Kode : HTML Media Query
Referensi
● Berikut contoh Media Feature untuk ukuran-ukuran layar dan perangkat yang banyak
digunakan : https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Display None
Display None
● Sebelumnya, di materi Display kita bahas sedikit bahwa atribut display bisa memiliki
value none (dihapus / dihilangkan)
● Pertanyaannya, untuk apa kita membuat elemen, tapi harus dihilangkan?
● Sebenarnya banyak kegunaannya, contohnya di materi ini, kita akan coba membuat
Menu Bar memanfaatkan Display None
Kode : HTML Menu Bar
Kode : Menu Bar CSS
Penutup
Belajar Apa Lagi?
● Belajar JavaScript
● Latihan membuat halaman web dari yang sederhana sampai yang kompleks
menggunakan HTML dan CSS
● Belajar Library CSS
○ Bootstrap : https://getbootstrap.com/
○ Tailwind CSS : https://tailwindcss.com/