Menggunakan Tata Letak Grid CSS untuk Membuat Halaman Web - Peteng Pikir : Artikel Seputar SEO, Film, Webiste, HTML, Gadget, dan Masih Banyak Lagi

Post Top Ad

Tuesday, 24 October 2017

Menggunakan Tata Letak Grid CSS untuk Membuat Halaman Web

Pada artikel ini, kita melihat sekilas grid dan bagaimana Anda bisa menggunakannya untuk membuat halaman web. Ada banyak aspek tata letak grid CSS. Istilah grid akan tercantum di sini, bersama dengan deskripsi singkat dan contoh kotak pada akhir artikel ini, beserta kode untuk membuatnya.
Berikut adalah berbagai komponen grid:
grid: Tata letak grid adalah rangkaian garis horisontal dan vertikal berpotongan yang membagi ruang peti kemas ke area grid. Ini terdiri dari item grid. Ada dua pasang garis grid. Satu set adalah sumbu kolom; yang lainnya adalah untuk baris, menentukan sumbu inline.
Inilah gambar dari tampilannya (dari CSS Snapshot 2017).

Gambar 1. Layout Grid
area grid: Area grid digunakan untuk meletakkan kotak grid. Ini terdiri dari sel grid dan terikat oleh empat garis grid, masing-masing di sisi area grid.
Sel grid: Sel grid terbentuk dimana barisan grid dan kolom saling berpotongan. Ini adalah unit terkecil dari sebuah grid.
kolom grid: Kolom berjalan sepanjang sumbu blok grid.
wadah grid: Wadah kotak berisi pemformatan untuk isinya. Garis grid membentuk batas setiap blok berisi item grid.
konteks format grid: Sebuah wadah grid menciptakan konteks format grid baru.
item grid: Ini adalah kotak yang mewakili isi arusnya.
algoritma penempatan item grid: Algoritma penempatan item grid menempatkan posisi otomatis item grid ke posisi yang pasti. Ini memastikan setiap item grid diletakkan di dalam area grid yang terdefinisi dengan baik.
Tata letak grid: Dalam grid, ada dua set garis grid, terdiri dari kolom yang berjalan di sepanjang sumbu blok dan satu set baris yang berjalan di sepanjang sumbu inline.
Tingkat grid: Item kotak adalah kotak tingkat grid. Ini adalah bagian dari konteks pemformatan kotak kontainer.
urutan grid: Urutan grid adalah bagaimana item grid ditemukan saat bergerak melalui sel grid. Jika dua item ditemui sekaligus, mereka terlihat sesuai urutan kemunculannya.

penempatan grid: Lokasi area grid adalah penempatan. Ini ditentukan oleh posisi dan rentang grid.
properti penempatan grid: Ditulis di longhand, ini adalah: grid-row-start, grid-row-end, grid-column-start, grid-column-end. Versi singkatannya adalah: grid-row, grid-column, dan grid-area-allow. Ini memungkinkan pengembang menentukan penempatan item grid.
Posisi grid: Ini bisa jadi pasti (secara eksplisit ditentukan) atau otomatis (ditentukan oleh penempatan otomatis).
Baris grid: Ini adalah penempatan sepanjang sumbu inline.
Baris baris grid: Garis grid adalah garis horizontal dan vertikal dalam kotak dan ada di kedua sisi kolom atau baris. Anda dapat menggunakan nomor untuk merujuk ke mereka, atau dengan nama yang ditentukan oleh penulis.
Algoritma grid sizing: Algoritma grid sizing, menentukan ukuran semua track grid dan keseluruhan grid. Setiap lintasan telah menentukan fungsi ukuran minimum dan maksimum. Setiap fungsi ukuran adalah:

  • Fungsi ukuran tetap (<length> atau putolvable <percentage>).
  • Fungsi ukuran intrinsik (min-content, max-content, auto, fit-content ()).
  • Fungsi ukuran fleksibel (<flex>).

Rentang grid: Ini adalah berapa banyak trek dalam item grid. Rentang selalu pasti dan defaultnya adalah 1 jika tidak dapat ditentukan.
lintasan grid: Ini adalah istilah umum untuk kolom grid atau baris grid. Ini adalah ruang antara dua garis grid yang berdekatan. Setiap jalur grid berisi fungsi ukuran yang mengontrol lebar dan tinggi kolom atau baris dan seberapa jauh jarak garis batasnya.
Berikut adalah contoh kode yang digunakan untuk membuat grid sederhana. Ini dibuat menggunakan Adobe Dreamweaver dan merupakan salah satu template yang mereka tawarkan.

Kode 1. Kode yang digunakan untuk membuat grid sederhana
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Light Theme</title>
<link href="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/css/simpleGridTemplate.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Main Container -->
<div class="container"> 
  <!-- Header -->
  <header class="header">
    <h4 class="logo">GRID</h4>
  </header>
  <!-- Hero Section -->
  <section class="intro">
    <div class="column">
      <h3>JOHN DOE</h3>
      <img src="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/images/profile.png" alt="" class="profile"> </div>
    <div class="column">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla</p>
    </div>
  </section>
  <!-- Stats Gallery Section -->
  <div class="gallery">
    <div class="thumbnail"> <a href="#"><img src="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/images/bkg_06.jpg" alt="" width="2000" class="cards"/></a>
      <h4>TITLE</h4>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="thumbnail"> <a href="#"><img src="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/images/bkg_06.jpg" alt="" width="2000" class="cards"/></a>
      <h4>TITLE</h4>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="thumbnail"> <a href="#"><img src="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/images/bkg_06.jpg" alt="" width="2000" class="cards"/></a>
      <h4>TITLE</h4>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="thumbnail"> <a href="#"><img src="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/images/bkg_06.jpg" alt="" width="2000" class="cards"/></a>
      <h4>TITLE</h4>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <div class="gallery">
    <div class="thumbnail"> <a href="#"><img src="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/images/bkg_06.jpg" alt="" width="2000" class="cards"/></a>
      <h4>TITLE</h4>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="thumbnail"> <a href="#"><img src="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/images/bkg_06.jpg" alt="" width="2000" class="cards"/></a>
      <h4>TITLE</h4>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="thumbnail"> <a href="#"><img src="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/images/bkg_06.jpg" alt="" width="2000" class="cards"/></a>
      <h4>TITLE</h4>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="thumbnail"> <a href="#"><img src="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/images/bkg_06.jpg" alt="" width="2000" class="cards"/></a>
      <h4>TITLE</h4>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <!-- Footer Section -->
  <footer id="contact">
    <p class="hero_header">GET IN TOUCH WITH ME</p>
    <div class="button">EMAIL ME </div>
  </footer>
  <!-- Copyrights Section -->
  <div class="copyright">©2015 - <strong>GRID</strong></div>
</div>
<!-- Main Container Ends -->
</body>
</html> 
Gambar 2. Contoh parsial seperti apa grid itu
Dalam contoh ini, Adobe Dreamweaver digunakan. Pilihan lainnya adalah Bootstrap, yang menawarkan banyak fleksibilitas.
Seperti yang Anda lihat, grid adalah salah satu blok bangunan tata letak CSS yang paling penting karena mereka menawarkan banyak kontrol atas tampilan dan nuansa tata letak. Kisi cairan akan memberi Anda hasil terbaik karena bisa menskalakan secara proporsional.

Tentang Penulis

Nathan Segal telah bekerja sebagai penulis lepas selama 18 tahun. Pada saat itu, dia telah menerbitkan lebih dari 1.000 artikel dan telah menulis 9 buku. Anda bisa belajar lebih banyak tentang dia di http://NathanSegal.org.

Sumber Artikel : https://www.htmlgoodies.com/beyond/css/using-the-css-grid-layout-to-create-web-pages.html

No comments:

Post a comment

Post Bottom Ad