Untuk membuat desain website yang rapi, kita perlu belajar melakukan layouting menggunakan CSS. Untuk melakukan hal tersebut kita dapat menggunakan property display untuk menentukan layout suatu elemen, ada beberapa jenis layout yang bisa kita gunakan, yaitu block, inline, inline-block, dan flexbox
Block merupakan layout default yang diterapkan ke beberapa elemen seperti div, ul, ol, p, h1 dan sebagainya. Ciri khas dari layout ini yaitu selalu membuat baris sendiri
Inline merupakan layout default yang diterapkan ke beberapa elemen seperti span, b, i dan sebagainya. Ciri khas dari layout ini yaitu mengikuti baris yang sudah ada
Apabila kita memberikan margin dan padding terhadap inline layout, maka ia hanya akan mendorong elemen disekitarnya secara horizontal dan tidak secara vertical
Inline block mirip dengan inline, yaitu akan selalu mengikuti baris yang sudah ada. Namun apabila kita memberikan margin dan padding, maka ia akan mendorong elemen disekitarnya secara horizontal dan juga vertical
Flexbox (Flexible Box) merupakan cara terbaru untuk melakukan layouting pada web yang mendukung design responsive
Ciri khas dari flexbox yaitu kita dapat mendesain layout berdasarkan containernya, sedangkan child elementnya dapat memiliki size yang berbeda - beda namun tetap responsive
Beberapa referensi untuk belajar layouting dengan css grid :
