.post-detail-layout__StyledBackgroundImage-sc-gl55w6-0.jHsswc:before { opacity: 1; background-image: url('/static/65cbc1a95534918f246a2f3e562c328e/b9630/grid-vs-flexbox-cover.png'); }

2 dk, tahmini okuma süresi

Aynı Sayfa Düzenini Oluştururken Grid vs Flexbox

En Son Güncelleme: 21 Mart, 2022

Sayfa düzenini oluşturmak zaman zaman olabiliyor. Ama fonksiyonel olarak benzer sayfa düzenini oluşturmak hem flexbox hem de grid kullanılarak mümkün. Üç farklı basit ama yaygın durumla kıyaslamayı görebilirsin.

§Kutular

<body>
    <div class="flexbox-container">
        <h2 class="wide-3">Boxes</h2>
        <div class="item-box item-1 wide-2">1</div>
        <div class="item-box item-2">2</div>
        <div class="item-box item-3 wide-2">3</div>
        <div class="item-box item-4 wide-2">4</div>
        <div class="item-box item-5 wide-3">5</div>
        <div class="item-box item-6">6</div>
        <div class="item-box item-7 wide-3">7</div>
        <div class="item-box item-8">8</div>
        <div class="item-box item-9 wide-2">9</div>
        <div class="item-box item-10">10</div>
        <div class="item-box item-11">11</div>
        <div class="item-box item-12 wide-2">12</div>
    </div>
</body>

Flexbox CSS:

body{ background: #3b094b; }
.item-box{
    min-height: 50px;
    display: grid;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    width: 30%;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 10px;
    margin-bottom: 10px;
}
h2{
    text-align: center;
    font-size: 50px;
    padding: 0;
    color: #fae1dd;
}
.item-1{ background: #8cdeff;}
.item-2{ background: #005f73; }
.item-3{ background: #0a9396; order: 2; }
.item-4{ background: #94d2bd; order:4; }
.item-5{ background: #e9d8a6; order:5; }
.item-6{ background: #ee9b00; order:3; }
.item-7{ background: #ca6702; order:7; }
.item-8{ background: #bb3e03; order:4; }
.item-9{ background: #ae2012; order:9; }
.item-10{ background: #9b2226; order:10; }
.item-11{ background: #fae1dd; order:11; }
.item-12{ background: #ffd7ba; order:12; }
.flexbox-container{
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    max-width: 960px;
}
.wide-2 { width: 66%; }
.wide-3 { width: 100%; }

Grid CSS:

body{ background: #3b094b; }
.item-box{
    min-height: 50px;
    display: grid;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}
h2{
    text-align: center;
    font-size: 50px;
    padding: 0;
    color: #fae1dd;
}
.item-1{background: #8cdeff;}
.item-2{background: #005f73;}
.item-3{background: #0a9396;}
.item-4{background: #94d2bd;}
.item-5{background: #e9d8a6;}
.item-6{background: #ee9b00;}
.item-7{background: #ca6702;}
.item-8{background: #bb3e03;}
.item-9{background: #ae2012;}
.item-10{background: #9b2226;}
.item-11{background: #fae1dd;}
.item-12{background: #ffd7ba;}

.grid-container{
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    grid-auto-flow: dense;
    max-width: 960px;
}
.wide-2 { grid-column: span 2; }
.wide-3 { grid-column: span 3; }

Span değerleriyle grid öğelerinin boyutlarını grid düzeni içerisinde ayarlamak gayet basit. "grid-gap" grid öğeleri arasında mesafeyi kolayca ayarlamamı sağlıyor. Flexbox'ta bunu yapmak biraz daha zorlaşıyor. Flexbox örneğindeki kutuların arasındaki mesafe, kullanılmayan uzunluğun (yüzdelik değer üzerinden) dörde bölünmesiyle elde ediliyor ve bunlar "margin" olarak kullanılıyor. Grid'in sağladığı gap değerleri çok daha kullanışlı bu durum için. İlerde daha çok öğe eklemek veya mobile de uyumlu bir tasarım yapmak isterseniz işinizi çok kolaylaştracak.

Grid'in sağladığı diğer bir güzellik de "grid-auto-flow: dense;". Boş kalan yerlere grid öğeleri yerleştirmeye başlıyor ve delik deşik görünüm kolayca engellenmiş oluyor. Bu görünüme alternatif olarak (en azından benim bulabildiğim) flexbox'ta "order" değereleri kullanılabilir. Bu yöntemle boş noktalar kapatılabiliyor ama bana kalırsa hataya açık bir durum ortaya çıkıyor. Uygulamanız veya websiteniz büyüdükçe daha da tehlikeli bir hale gelebilir.

<body>
    <nav class="navbar">
        <img src="/very-cool-logo.png" alt="brand logo">
        <ul class="navbar-items">
            <li class="navbar-item">About</li>
            <li class="navbar-item">Blog</li>
            <li class="navbar-item">Cat Pics</li>
            <li class="navbar-item">Contact Us</li>
        </ul>
    </nav>
    <h1>Flexbox vs Grid Layout</h1>
</body>

Grid CSS;

body {
    background: #227c9dff;
    padding: 0;
    margin: 0;
}
.navbar {
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    background: white;
    max-width: 960px;
    height: 100px;
}
.brand-logo { height: 100px; }
.navbar-items {
    list-style: none;
    display: grid;
    grid-template-columns: auto auto auto auto;
    max-width: 550px;
}
.navbar-item {
    font-size: 2rem;
    margin: 10px;
}
.navbar-item:hover { cursor: pointer; }
h1 {
    font-size: 3rem;    
    text-align: center;
    color: aliceblue;
}

Flexbox CSS;

body {
    background: #227c9dff;
    padding: 0;
    margin: 0;
}
.navbar {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    background: white;
    max-width: 960px;
    height: 100px;
}
.navbar-items { 
    list-style: none; 
    margin-left: auto;  
    display: flex; }
.navbar-item { font-size: 2rem; margin: 10px; }
.navbar-item:hover { cursor: pointer; }
h1 {
    font-size: 3rem;    
    text-align: center;
    color: aliceblue;
}

Navbar örneği basit ama flexbox'ın kullanımının gerekliliğini göstermek için yeterli. Grid kullanılarak da aynı navbar oluşturulabiliyor ama logonun "height" değerini kendim vermem gerekti. Sabit bir "height" değerei genelde responsive dizayn için problem oluşturduğu için kaçınıması gereken bir değer. Siz projelerinizde sabit değerler vererek de başarılı işler ortaya çıkarabilirsiniz ama açıkçası sabit değerler beni biraz korkutuyor. Logo ve diğer navigasyon öğelerini farklı üçlara itmek için grid'de "justify-content: space-between" kullandım.

Flexbox'ta logo için bir "height" değeri kullanmama gerek olmadı. Logomuz otomatik olarak navbarın "height" değeri çerisinde kalıyor ve başımız ağrımıyor. Navigasyon öğelerini ve logoyu ayırmak da gayet kolay. Sağa sabitlemek istediğin öğeye "margin-left: auto" değerini vermen yeterli."margin" bu şekilde kullanılarak footer'ı sayfanın en altına sabitlemek de muhtemelen en basit çözüm. Tabi body, "display:flex" değeri almalı.

§Full Sayfa

<body>
    <div class="content-container">
        <h1 class="page-title">Awesome Web Page About Cool Stuff | Grid vs Flexbox Layout</h1>
        <div class="left-container">
            <img class="avatar-pic" src="./wolf.png" alt="avatar">
            <h3>Author Info</h3>
            <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. amet consectetur adipisicing elit. Earum ipsam quidem enim itaque autem sed temporibus quia, et necessitatibus delectus consectetur animi doloremque architecto similique eaque possimus, ducimus aliquid voluptate!
                Voluptas nobis mollitia, accusamus suscipit 
            </p>
        </div>
        <div class="deal-container">
           <h3 class="deal-title">Some Deal you should know about</h3>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ipsam quidem enim itaque autem sed temporibus quia, et necessitatibus delectus consectetur animi doloremque architecto similique eaque possimus, ducimus aliquid voluptate!
           Voluptas nobis mollitia, accusamus suscipit quod, sed illo deserunt sapiente non eius incidunt nihil quis nam unde ratione at odit recusandae enim voluptatem, natus alias. Accusamus, dignissimos! Quisquam, veniam nemo.</p>
        
        </div>
        <div class="blog-container">
        <h2 class="blog-title">Blog Post</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam, harum reprehenderit. Ad ut officiis perspiciatis enim? Totam deleniti labore odio consectetur! Quia praesentium temporibus laboriosam quis quod atque, mollitia sunt.
        </p>
        <h3 id="a-title">A title</h3>
        <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam, harum reprehenderit. Ad ut officiis perspiciatis enim? Totam deleniti labore odio consectetur! Quia praesentium temporibus laboriosam quis quod atque, mollitia sunt.
        </p>
        <h3 id="another-title">Another title</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet accusantium ut, expedita eaque quaerat adipisci, numquam, ipsam maiores voluptatum quis dicta explicabo doloremque? Modi et natus temporibus fugiat quae! Saepe!
        </p>
        <h3 id="third-title">Third title</h3>
        <p>
        Voluptates laborum velit, nostrum architecto a aperiam! Quisquam quo dolorem officiis eveniet labore assumenda. Officia iste reprehenderit ut perferendis magnam commodi nostrum, ducimus ipsam quia accusamus ea autem? Illum, porro.
        Excepturi magni enim necessitatibus voluptas qui repellendus, totam amet eveniet iste natus ipsum tenetur quod omnis magnam officia porro vitae dolores fuga doloremque asperiores tempora. Perspiciatis ipsa dolor quos deleniti.
        Alias ab voluptatum similique quidem nihil nostrum dolore maxime consectetur saepe nobis odit hic, numquam, perferendis iusto sint magnam ipsam earum molestias, debitis veniam a. Rem dolor atque molestias nemo?
        </p>
        <h3 id="the-last-title">The Last Title</h3>
        <p>
        Ipsa nobis libero amet voluptate facilis, reiciendis illo corporis fugit, laudantium dolor atque quo temporibus sit illum dignissimos porro! A obcaecati velit ducimus molestiae provident doloremque, atque quaerat quam corrupti?
        Numquam inventore maiores nobis! Culpa minima facilis repudiandae itaque doloribus, magni veniam sint, qui eius dolorum enim quod ipsa maxime quaerat esse alias nostrum architecto, vitae cupiditate voluptatibus repellendus! Earum?</p>
        </div>
        <div class="right-container">
            <h3 class="toc-title">Table Of Contents</h3>
            <ul>
                <li><a href="#a-title">A Title</a></li>
                <li><a href="#another-title">Another Title</a></li>
                <li><a href="#third-title">Third Title</a></li>
                <li><a href="#the-last-title">The Last Title</a></li>
            </ul>
        </div>
    </div>
</body>

Grid CSS;

body {
    padding: 0;
    margin: 0;
    background: #023047ff;
    color: whitesmoke;
}
a { color: whitesmoke; font-size: 1.6rem; }
li {
    list-style: none;
    padding: none;
    margin: none;
}
.content-container {
    display:grid;
    grid-template-columns: 3fr 5fr 2fr;
    grid-gap: 30px;
    justify-items: center;
}
.page-title { grid-column: 1 / -1; }
.left-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 5px;
    justify-items: center;
    background: rgba(0,0,0,.25);
    padding: 20px;

}
.avatar-pic {
    background: white;
    border-radius: 50%;
    max-width: 100px;
}
.author-container {  padding: 5px; }
.author-info { background: red; }
.deal-container {
    grid-column: 1/ 2;
    grid-row: 3 / 4;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
}
.deal-title { font-size: 2.4rem; }
.blog-container { grid-row: span 3; }
.blog-title { font-size: 3rem; }
.blog-container > h3 {  font-size: 2rem; }
.blog-container > p { font-size: 1.4rem; }
.right-container {
    padding: 20px;
    background: rgba(0,0,0,.25);
}
.toc-title {
    font-size: 2rem;
    text-align: center;
}

Flexbox CSS;

body {
    padding: 0;
    margin: 0;
    background: #023047ff;
    color: whitesmoke;
}
a {
    color: whitesmoke;
    font-size: 1.6rem;
}
li {
    list-style: none;
    padding: none;
    margin: none;
}
.content-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-items: center;
}
.page-title {
    text-align: center;
    width: 100%;
}
.left-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 600px;
    width: 27%;
    justify-items: center;
    padding: 20px;

}
.avatar-pic {
    background: white;
    border-radius: 50%;
    max-width: 100px;
}
.author-container { padding: 5px; }
.deal-container { background: rgba(255, 255, 255, 0.1); }
.deal-title { font-size: 2.4rem; }
.blog-container { width: 48%; }
.blog-title { font-size: 3rem; }
.blog-container > h3 { font-size: 2rem; }
.blog-container > p { font-size: 1.4rem; }
.right-container {
    height: 300px;
    width: 20%;
    padding: 5px;
    background: rgba(0,0,0,.25);
}
.toc-title {
    font-size: 2rem;
    text-align: center;
}

Sayfayı temsil etmesi gereken bölümde basit bir blog görünümü sağlayamaya çalıştım. Muhtemelen şimdiye kadar zaten bir tane yapmışsındır veya yakında yapacaksındır. Flexbox kullanmak burada kabus gibi gibiydi diyebilirim. Her örnek için aynı html dosyasını kullanmayı düşünürek projeye başlamıştım. Ama flexbox'ın çalışmasını sağlamak için html'i değiştirmem gerekti. Aynı sayfa düzenini oluşturmak için "order" dahi kullanmama rağmen grid'de kolayca elde ettiğim farkı sıra boyutlarını oluşturmak çok zor oldu. Kesinlike hayrcayacağınız çabaya değmez, grid candır.

Flexbox'a kıyasla grid'i oluşturmak gayet kolay oldu. Span kullanılarak blog metnini bütün sayfaya yaymak bana kalırsa en akıllıca çözüm.

§Benim Yorumum

I would definitely suggest using grid for larger elemetns or for a page. For smaller components like navbar or a div object that contains a bunch of image and some p tags you can go with flexbox. In almost every sceneraio I can think of we can use grid. However knowing what flexbox can do for your project helps you use css to the fullest. You can find the full code in here in this repository

Kesinlike büyük projeleri oluşturmak için grid kullan. Daha küçük gruplar (navbar veya içinde resimler, kısa metinler bulunan div'ler) için. Düşünebildiğim her durumda grid flexbox'ın yerini alabiliyor. Ama flexbox'ın kullanım alanlarını ve sağladığı kolaylıkları da bilmekte fayda olduğunu düşünüyorum. Bu metin için oluşturduğum repository'ye burdan ulaşabilirsin.

Ilker Akbiyik

İçindekiler

Kutular Full Sayfa Benim Yorumum

Benzer Paylaşımlar

teknoloji - 13 Mayıs, 2022

6 En Kullanisli React Hooku

Fonksinel bileşenler (fucntional components) kesinlikle benim en sevdiğim react bileşeni türü. Bu bileşenleri oluşturmayı ve okumayı çok daha kolay buluyorum. Bileşeni çalışır duruma getirmek için gereken minimum standart kod boyutu da alternatiften çok daha küçüktür. React Hookları (Kancalar), fonksiyonel bileşenlerle çalışırken en büyük yardımcınız olacak.

Ilker Akbiyik

teknoloji - 10 Haziran, 2022

JavaScript Spread Operator ve Kullanımları

Spread operatörü, JavaScript'te diziler ve nesnelerle çalışırken her şeyi çok daha kolaylaştırmak için kullanılabilir. Mutasyon gerektirmeyen işlemer de bu operatör kullanılarak yapılabilir. Bir fonksiyon sıfır veya daha fazla argüman beklediğinde, yine spread operatörünü kullanabilirsiniz.

Ilker Akbiyik

teknoloji - 27 Haziran, 2022

Chart.js VS D3.js

Displaying your data as graphs and charts not only make them more easy to understand, it also makes dealing with data not so boring. As a web developer / programmer you either worked with or going to work with data. Chart.js and D3.js are the two most popular data visualization libraries that you can use with JavaScript. In this post I am going to be sharing with you some general information about each of them and my personal opinion using both of these libraries.

Ilker Akbiyik

§Kutular

§Navbar

§Full Sayfa

§Benim Yorumum

Benzer Paylaşımlar