CSS Layout

Eko Kurniawan Khannedy

Eko Kurniawan Khannedy
● Technical architect at one of the biggest
ecommerce company in Indonesia
● 13+ years experiences
● [Link]
● [Link]/c/ProgrammerZamanNow
Eko Kurniawan Khannedy
● Telegram : @khannedy
● Linkedin : [Link]
● Facebook : [Link]/ProgrammerZamanNow
● Instagram : [Link]/programmerzamannow
● Youtube : [Link]/c/ProgrammerZamanNow
● Telegram Channel : [Link]/ProgrammerZamanNow
● Tiktok : [Link]
● Email : [Link]@[Link]
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 [Link]
● 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
● [Link]
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 :
● [Link]
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
● [Link]
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
● [Link]
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%
● [Link]
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
● [Link]
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
● [Link]
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
● [Link]
CSS/justify-content
Kode : Justify Content
Align Items
● Atribut align-items bisa digunakan
untuk perataan Flex Item secara
cross-axis
● [Link]
/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
● [Link]
Web/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)
● [Link]
● [Link]
● [Link]
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
● [Link]
● Atribut grid-template-rows digunakan untuk menentukan baris
● [Link]
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
● [Link]
● [Link]
● [Link]
● [Link]
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
● [Link]
● Dan untuk menentukan Grid Item muncul di area mana, kita bisa gunakan atribut
grid-area
● [Link]
● 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
● [Link]
Kode : Grid Justify Content
Align Content
● Atribut align-content digunakan agar menyelaraskan Grid Row seperti
justify-content
● [Link]
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
● [Link]
Kode : Grid Justify Items
Align Items
● Align Items akan melakukan penyelarasan di level Grid Cell
● [Link]
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
● [Link]
● [Link]
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
● [Link]
● [Link]
● [Link]
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
● [Link]
● Atau jika kita ingin menentukan lebar kolom, tanpa peduli jumlah kolom yang
akan dibuat, kita bisa gunakan atribut column-width
● [Link]
Kode : Multiple Column
Column Style
● Kita juga bisa mengubah Style untuk Column
● Atribut column-gap untuk mengatur jarak Column
● [Link]
● Atribut column-rule untuk mengatur border dari Column
● [Link]
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
● [Link]
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
● [Link]
● 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
● [Link]
● [Link]
● [Link]
● [Link]
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
● [Link]
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
● [Link]
dia_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 :
[Link]
● Dan untuk Media Feature, kita bisa melihat disini untuk daftar yang tersedia :
[Link]
● 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 : [Link]
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 : [Link]
○ Tailwind CSS : [Link]