{"id":51429,"date":"2024-11-11T14:45:52","date_gmt":"2024-11-11T07:45:52","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=51429"},"modified":"2024-12-23T09:22:54","modified_gmt":"2024-12-23T02:22:54","slug":"belajar-css-bagian-11","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-11\/","title":{"rendered":"Belajar CSS Bagian 11: Fungsi dan Contoh Grid Layout"},"content":{"rendered":"\n<p>Setelah sebelumnya kita belajar tentang <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-10\/\" target=\"_blank\" rel=\"noopener\" title=\"CSS variable\">CSS Variables<\/a> pada sesi belajar CSS bagian 10, dalam artikel ini kami akan membahas tentang Grid Layout. Lalu, apa itu Grid Layout dan fungsinya pada CSS? Simak informasi berikut ini.<\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">Apa itu Grid Layout?<\/h2>\n\n\n\n<p>Grid Layout adalah sistem tata letak dua dimensi yang digunakan untuk membuat struktur halaman web yang responsif dan fleksibel. Dengan Grid Layout, elemen dalam sebuah kontainer dapat disusun dalam bentuk baris dan kolom secara mudah, sehingga menghasilkan tata letak yang lebih teratur dan simetris.<\/p>\n\n\n\n<p>Selain itu, CSS Grid akan memberikan kebebasan dan kemudahan kepada desainer website untuk mengatur elemen, baik itu baris dan kolom agar terlihat <em>responsive <\/em>di semua perangkat.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fungsi CSS Grid<\/h2>\n\n\n\n<p>Berikut adalah beberapa fungsi yang dapat diimplementasikan pada <a href=\"https:\/\/www.rumahweb.com\/journal\/css-adalah\/\" target=\"_blank\" rel=\"noopener\" title=\"css adalah\">CSS<\/a> grid:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Mengatur Baris dan Kolom<\/strong>: CSS Grid dapat mempermudah dalam mengatur pembuatan tata letak yang dinamis dalam bentuk baris dan kolom.<\/li>\n\n\n\n<li><strong>Mengatur Ukuran dan Posisi Elemen<\/strong>: CSS Grid dapat mengatur ukuran elemen grid. Contoh properti yang digunakan yaitu seperti <code>grid-column<\/code>, <code>grid-row<\/code>, <code>grid-template-columns<\/code>, dan <code>grid-template-rows<\/code>.<\/li>\n\n\n\n<li><strong>Mengatur Tata Letak Responsif<\/strong>: CSS Grid dapat mengatur untuk membuat desain website yang responsif dan sesuai dengan ukuran layar. Contoh properti yang digunakan yaitu seperti grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));<\/li>\n\n\n\n<li><strong>Mengatur Jarak Antar Elemen (Gap)<\/strong>: CSS Grid dapat mengatur jarak antar elemen tanpa menggunakan padding atau margin. Properti yang digunakan yaitu gap, row-gap, dan column-gap.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Dasar Penggunaan CSS Grid<\/h2>\n\n\n\n<p>Selanjutnya, kita akan belajar CSS Grid Layout pada website. Namun, kami berharap Anda memahami terlebih dahulu dasar-dasar penggunaan Grid Layout pada CSS, yang penjelasannya dapat Anda pelajari sebagai berikut:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Display Property<\/h3>\n\n\n\n<p>Untuk membuat elemen HTML sebagai grid, Anda harus mengatur <em>property <\/em>display menjadi grid atau <em>inline<\/em>-grid pada elemen html atau kontainer html Anda.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Grid Columns<\/h3>\n\n\n\n<p>Grid Column merupakan <em>layout <\/em>tampilan grid secara vertikal. Bayangkan baris vertikal yang membagi tata letak menjadi beberapa bagian dari kiri ke kanan.<\/p>\n\n\n\n<p>Kolom-kolom ini bisa diatur lebarnya menggunakan properti <code>grid-template-columns<\/code>, yang menerima nilai-nilai seperti ukuran absolut (<code>px<\/code>, <code>em<\/code>), persentase (<code>%<\/code>), atau unit <em>fraction<\/em> (<code>fr<\/code>). <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n    display: grid;\n    grid-template-columns: 1fr 2fr 1fr;\n}<\/code><\/pre>\n\n\n\n<p>Kode di atas akan membuat tiga kolom dengan proporsi 1:2:1.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Grid Rows<\/h3>\n\n\n\n<p>Grid Rows merupakan layout tampilan grid secara horizontal. Kita bisa mengatur tingginya dengan properti <code>grid-template-rows<\/code>, menggunakan ukuran absolut, persentase, atau <em>fraction<\/em> untuk menetapkan proporsi tinggi baris. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {<br \/>display: grid;<br \/>grid-template-rows: 100px 200px 100px;<br \/>}<\/code><\/pre>\n\n\n\n<p>Kode diatas membuat tiga baris dengan tinggi masing-masing 100px, 200px, dan 100px.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Grid Gaps<\/h3>\n\n\n\n<p>Grid Gaps merupakan layout tampilan grid untuk mengatur jarak antar kolom dan baris lain. Properti yang digunakan yaitu <code>column-gap<\/code>, <code>row-gap<\/code>, atau <code>gap <\/code>(gabungan dari column-gap dan row-gap).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Grid Lines<\/h3>\n\n\n\n<p>Dengan Grid Lines dapat mengatur jumlah ukuran elemen sesuai dengan jumlah kolom atau baris. Properti yang digunakan untuk jumlah kolom yaitu <code>grid-column-start<\/code> dan <code>grid-column-end<\/code>, sedangkan properti yang digunakan untuk jumlah row yaitu <code>grid-row-start<\/code> dan <code>grid-row-end<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Grid Container<\/h3>\n\n\n\n<p>Untuk membuat elemen HTML sebagai <em>container <\/em>grid, Anda harus mengatur property display menjadi grid atau inline-grid pada element html Anda. Selanjutnya Anda dapat menambahkan property lain seperti <code>grid-template-columns<\/code>, <code>grid-template-rows<\/code>. Berikut contoh scriptnya :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.grid-container {\n  display: grid;\n  grid-template-columns: auto auto auto auto;\n  grid-template-rows: 80px 200px;\n}\n\n&lt;div class=\"grid-container\"&gt;\n  &lt;div&gt;1&lt;\/div&gt;\n  &lt;div&gt;2&lt;\/div&gt;\n  &lt;div&gt;3&lt;\/div&gt;  \n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Grid Item<\/h3>\n\n\n\n<p>Secara default dalam sebuah kontainer grid memiliki 1 kolom dan 1 baris, Dengan Grid Item Anda dapat mengatur elemen dan beberapa elemen di dalam grid. Properti yang digunakan yaitu <code>grid-column<\/code> (gabungan dari <strong>grid-column-start<\/strong> dan <strong>grid-column-end<\/strong>) dan <code>grid-row<\/code> (gabungan dari <strong>grid-row-start<\/strong> dan <strong>grid-row-end<\/strong>).<\/p>\n\n\n\n<p>Berikut contoh scriptnya :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.item1 {\n  grid-column: 1 \/ 5;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Contoh Implementasi Grid Layout<\/h2>\n\n\n\n<p>Untuk membuat layout Grid, Anda harus membuat sebuah <em>container <\/em>html dengan property display menggunakan grid. Berikut contoh skripnya:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"grid-container\"&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>kemudian untuk <em>script <\/em>CSS-nya yaitu :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.grid-container {\n  display: grid;\n}<\/code><\/pre>\n\n\n\n<p>Selanjutnya, tambahkan item didalam kontainer yang dibuat seperti di atas, berikut contoh script htmlnya.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"grid-container\"&gt;\n  &lt;div class=\"item\"&gt;1&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;2&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;3&lt;\/div&gt;  \n  &lt;div class=\"item\"&gt;4&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;5&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;6&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;7&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;8&lt;\/div&gt;  \n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Kemudian, tambahkan <em>script <\/em>CSS untuk mengatur gird layout pada kontainer html tersebut, berikut contoh script cssnya :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.grid-container {\n    display: grid;\n    grid-template-columns: auto auto auto auto;\n    grid-template-rows: 100px 100px;\n    background-color: blueviolet;\n    gap: 10px;\n    padding: 10px;\n}\n.item {\n    text-align: center;\n    background-color: aqua;\n    padding: 10px;\n    font-size: 28px;\n}<\/code><\/pre>\n\n\n\n<p>dan untuk <em>script <\/em>lengkapnya seperti berikut :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n.grid-container {\n    display: grid;\n    grid-template-columns: auto auto auto auto;\n    grid-template-rows: 100px 100px;\n    background-color: blueviolet;\n    gap: 10px;\n    padding: 10px;\n}\n.item {\n    text-align: center;\n    background-color: aqua;\n    padding: 10px;\n    font-size: 28px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n&lt;div class=\"grid-container\"&gt;\n  &lt;div class=\"item\"&gt;1&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;2&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;3&lt;\/div&gt;  \n  &lt;div class=\"item\"&gt;4&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;5&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;6&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;7&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;8&lt;\/div&gt;  \n&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Kemudian jika di testing di <em><a href=\"https:\/\/blog.rumahweb.com\/browser-adalah\/\" target=\"_blank\" rel=\"noopener\" title=\"browser adalah\">browser<\/a> <\/em>untuk tampilan layar lebar (laptop \/ dekstop pc), akan menampilkan <em>screenshoot <\/em>seperti berikut :<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"470\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-1024x470.png\" alt=\"CSS Grid Layout - belajar CSS\" class=\"wp-image-51435\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-1024x470.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-300x138.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-768x353.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-1536x705.png 1536w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-370x170.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-270x124.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-570x262.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-740x340.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image.png 1917w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Sedangkan jika di testng di browser untuk tampilan layan kecil (mobile \/ smartphone), akan menampilkan screenshoot seperti berikut :<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"462\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-1-1024x462.png\" alt=\"contoh grid layout css\" class=\"wp-image-51436\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-1-1024x462.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-1-300x135.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-1-768x346.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-1-1536x692.png 1536w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-1-370x167.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-1-270x122.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-1-570x257.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-1-740x334.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/image-1.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Dari screenshoot diatas, dengan menggunakan CSS Grid Layout posisi layout html akan mengikuti sesuai dengan ukuran layar \/ perangkat pengguna.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kesimpulan<\/h2>\n\n\n\n<p>Dengan memahami fungsi dasar CSS Grid, Anda dapat memanfaatkan CSS Grid Layout untuk menciptakan desain web yang modern, responsive, dan mudah disesuaikan sesuai kebutuhan halaman atau perangkat pengguna.<\/p>\n\n\n\n<p>Demikian artikel belajar CSS bagian 11 tetang pengertian dan fungsi CSS Grid Layout. Dalam series belajar CSS bagian 12, kita akan belajar tentang <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-12\/\" target=\"_blank\" rel=\"noopener\" title=\"\">CSS Flexbox Layout<\/a> yang berfungsi untuk menyederhanakan tata letak website secara responsif. Semoga bermanfaat.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Setelah sebelumnya kita belajar tentang CSS Variables pada sesi belajar CSS bagian 10, dalam artikel ini kami akan membahas tentang Grid Layout. Lalu, apa itu Grid Layout dan fungsinya pada CSS? Simak informasi berikut ini. Apa itu Grid Layout? Grid Layout adalah sistem tata letak dua dimensi yang digunakan untuk membuat struktur halaman web yang [&hellip;]<\/p>\n","protected":false},"author":353,"featured_media":51529,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[1752,1751,2186],"class_list":{"0":"post-51429","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-design","8":"tag-belajar-css","9":"tag-css","10":"tag-tutorial-css"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/51429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=51429"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/51429\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/51529"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=51429"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=51429"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=51429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}