CSS Grid: Web Sayfası Şabolunu Oluşturma

CSS Grid Layout, CSS içinde bulunan en güçlü yerleşim düzenidir. Tek boyutlu flexbox’ın aksine hem sütun hemde satırları işleyebilme özelliğine sahiptir. CSS Grid Layout hem anadüzene hem de alt düzenlere kurallar uygulayarak sayfanın şablonunu oluşturmak için kullanılabilir. Ayrıca sayfa şablonu oluşturmak için grid kullanıp alt kısımlarda da flexbox kullanmak mümkündür.

CSS Grid Layout şuan aşağıdaki tarayıcılar ve belirtilen versiyonlar ile çalışmaktadır. (veri:caniuse sitesinden alınmıştır.)

CSS Grid Layout kullanarak aşağıdaki sayfa şablonunu oluşturmak için adım adım kodlamaya başlayalım.

CSS Grid Layout öncesi sayfa tasarımları sırasıyla tablo,float:left, inline-block gibi CSS özellikleri ile sayfa şablonları oluşturulurdu. Bu tasarımlar sırasında sayfanın sağını düzelttiğimizde solu solunu düzeldiğinde sağı kayması gibi sorunlar ile çok sık karşılaşmışsınızdır. Bu yapacağım basit grid tasarımı ile sayfanın şablonunu nasıl oluşturduğumuzu inceleyeceğiz.

Kodlara geçmeden önce animasyonu dikkatlice incelemenizi tavsiye ederim. Oluşturacağım sayfa tasarımı animasyondaki kurallara birebir uyacak şekilde olacaktır.

CSS Grid Şabolunun Oluşturulması

Grid sistemi oluşturmak için şablon ögelerine isim verilebileceği gibi sabit değerler ile de şablonu oluşturmak mümkündür. Aşağıdaki görselde iki sütunlu ve beş satırlı bir sayfa tasarımı görünmektedir. Grid tasarımında nesneleri yerleştirmek için sütun başlangıç ve bitiş çizgilerini iyi bilmek ve ona göre nesneleri yerleştirmek gerekir. Aşağıdaki görselde şablonun ızgara(grid) çizgileri gösterilmektedir. Nesnenin hangi çizgiden yerleştirileceğini göstermek için grid-column-start / grid-row-start ve nerede biteceğini göstermek için grid-column-end / grid-row-end kullanılır.

Adım 1: Öncelikle 1080px genişliğinde sayfa divini, içeride kullancağım diğer divleri ve sayfa divinin CSS kodlarını oluşturuyoruz.

.sayfa nesnesi grid nesnesidir ve iki sütun olarak oluşturulmuştur. İlk sütun genişliği 350px ikinci sütun genişliği 720px ve arada 10px boşluk olacak şekilde toplam genişlik 1080px olarak ayarlanmıştır. grid-template-columns özelliği kaç sütundan oluşacağı ve sütunların genişliklerinin ne olacağını belirtmek için kullanılır.

HTML:


<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Grid Örnek</title>
        <link href="tasarim.css" rel="stylesheet">
    </head>
    <body>
        <div class="sayfa">
            <div class="ust">Üst bölüm</div>
            <div class="menu">menü</div>
            <div class="sol">sol panel</div>
            <div class="sag">sag içerik</div>
            <div class="alt"></div>
        </div>
    </body>
</html>

<!doctype html>

<html>

<head>

<title>Grid Örnek</title>

</head>

<body>

<div class="ust">Üst bölüm</div>

<div class="sol">sol panel</div>

<div class="sag">sag içerik</div>

</div>

</body>

</html>

CSS:


.sayfa{
    display: grid;
    grid-template-columns: 350px 720px;
    grid-gap: 10px;
    width: 1080px;
    margin:auto;
    
}

.sayfa{

display: grid;

grid-template-columns: 350px 720px;

grid-gap: 10px;

width: 1080px;

margin:auto;

}

Adım 2: .ust etiketinin CSS kodlarının oluşturulması. Grid nesnesinde sütun başlanıç ve bitiş çizgileri animasyonda gösterilmiştir. Üst bölüm tüm satırı kapladığı için 1.sütun çizgisinden başlayıp son (3.sütun) çizgisine kadar grid alanını kaplayacaktır. grid-column-start başlangıç çizgisini, grid-column-end bitiş çizgisini ifade eder. Aynı şekilde grid-row-start, grid-row-end özellikleri de satır başlangıcını ve bitişini ifade eder.


.ust{
    height: 200px;
    grid-column-start:1;
    grid-column-end:3;
    /* grid-column:start/end  şeklinde de kullanılabilir.*/ 
    grid-row-start: 1;
    grid-row-end: 2;
    border:10px solid #000;  
}

.ust{

height: 200px;

grid-column-start:1;

grid-column-end:3;

/* grid-column:start/end şeklinde de kullanılabilir.*/

grid-row-start: 1;

grid-row-end: 2;

border:10px solid #000;

}

Adım 3: .menu nesnesinin oluşturulması için de 2.satırın çizgisinden 3.satır çizgisine kadar ki alanı çizdireceğiz.


.menu{
    height: 50px;
    grid-column-start:1;
    grid-column-end:3;
    /* grid-column:start/end  şeklinde de kullanılabilir.*/
    
    grid-row-start: 2;
    grid-row-end: 3;
    border:10px solid #000;
}

.menu{

height: 50px;

grid-column-start:1;

grid-column-end:3;

/* grid-column:start/end şeklinde de kullanılabilir.*/

grid-row-start: 2;

grid-row-end: 3;

border:10px solid #000;

}

Adım 4: .sol bölümü için 1.sütun çizgisinden başlayıp 2.sütun çizgisine kadar ki 350px genişliğindeki ilk sütunu ve .sag içinde 2.sütun çizgisinden başlayıp 3.sütun çizgisine kadar ki 720px genişliğindeki alanı seçiyoruz. Aynı şekilde her iki nesnenin şimdlik genişliğini 300px olarak ayarlayıp 3. satırda olduğunu ifade ediyoruz.


.sol{
    min-height: 300px;/*sonra kaldırılacak*/
    grid-column-start:1;
    grid-column-end:2;
    /* grid-column:start/end  şeklinde de kullanılabilir.*/
    
    grid-row-start: 3;
    grid-row-end: 4;
    border:10px solid #000; 
}

.sag{
    min-height: 300px;/*sonra kaldırılacak*/
    grid-column-start:2;
    grid-column-end:3;
    /* grid-column:start/end  şeklinde de kullanılabilir.*/
    
    grid-row-start: 3;
    grid-row-end: 4;
    border:10px solid #000; 
}

.sol{

min-height: 300px;/*sonra kaldırılacak*/

grid-column-start:1;

grid-column-end:2;

/* grid-column:start/end şeklinde de kullanılabilir.*/

grid-row-start: 3;

grid-row-end: 4;

border:10px solid #000;

}

.sag{

min-height: 300px;/*sonra kaldırılacak*/

grid-column-start:2;

grid-column-end:3;

/* grid-column:start/end şeklinde de kullanılabilir.*/

grid-row-start: 3;

grid-row-end: 4;

border:10px solid #000;

}

Adım 5: Son etiket ve tüm css kodları aşağıdaki gibi oluşacaktır. Oluşan sayfanın ekran görüntüsü de aşağıdaki gibi oluşur.

HTML:


<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Grid Örnek</title>
        <link href="tasarim.css" rel="stylesheet">
    </head>
    <body>
        <div class="sayfa">
            <div class="ust">Üst bölüm</div>
            <div class="menu">menü</div>
            <div class="sol">sol panel</div>
            <div class="sag">sag içerik</div>
            <div class="alt"></div>
        </div>
    </body>
</html>

<!doctype html>

<html>

<head>

<title>Grid Örnek</title>

</head>

<body>

<div class="ust">Üst bölüm</div>

<div class="sol">sol panel</div>

<div class="sag">sag içerik</div>

</div>

</body>

</html>

CSS:


body{
    margin:0;
}
.sayfa{
    display: grid;
    grid-template-columns: 350px 720px;
    grid-gap: 10px;
    width: 1080px;
    margin:auto;
    
}
.ust{
    height: 200px;
    grid-column-start:1;
    grid-column-end:3;
    /* grid-column:start/end  şeklinde de kullanılabilir.*/ 
    grid-row-start: 1;
    grid-row-end: 2;
    border:10px solid #000;  
}

.menu{
    height: 50px;
    grid-column-start:1;
    grid-column-end:3;
    /* grid-column:start/end  şeklinde de kullanılabilir.*/
    
    grid-row-start: 2;
    grid-row-end: 3;
    border:10px solid #000;
}

.sol{
    min-height: 300px;/*sonra kaldırılacak*/
    grid-column-start:1;
    grid-column-end:2;
    /* grid-column:start/end  şeklinde de kullanılabilir.*/
    
    grid-row-start: 3;
    grid-row-end: 4;
    border:10px solid #000; 
}

.sag{
    min-height: 300px;/*sonra kaldırılacak*/
    grid-column-start:2;
    grid-column-end:3;
    /* grid-column:start/end  şeklinde de kullanılabilir.*/
    
    grid-row-start: 3;
    grid-row-end: 4;
    border:10px solid #000; 
}
.alt{
    height: 100px;
     grid-column-start:1;
    grid-column-end:3;
    /* grid-column:start/end  şeklinde de kullanılabilir.*/
    
    grid-row-start: 4;
    grid-row-end: 5;
    border:10px solid #000; 
}

body{

margin:0;

}

.sayfa{

display: grid;

grid-template-columns: 350px 720px;

grid-gap: 10px;

width: 1080px;

margin:auto;

}

.ust{

height: 200px;

grid-column-start:1;

grid-column-end:3;

/* grid-column:start/end şeklinde de kullanılabilir.*/

grid-row-start: 1;

grid-row-end: 2;

border:10px solid #000;

}

.menu{

height: 50px;

grid-column-start:1;

grid-column-end:3;

/* grid-column:start/end şeklinde de kullanılabilir.*/

grid-row-start: 2;

grid-row-end: 3;

border:10px solid #000;

}

.sol{

min-height: 300px;/*sonra kaldırılacak*/

grid-column-start:1;

grid-column-end:2;

/* grid-column:start/end şeklinde de kullanılabilir.*/

grid-row-start: 3;

grid-row-end: 4;

border:10px solid #000;

}

.sag{

min-height: 300px;/*sonra kaldırılacak*/

grid-column-start:2;

grid-column-end:3;

/* grid-column:start/end şeklinde de kullanılabilir.*/

grid-row-start: 3;

grid-row-end: 4;

border:10px solid #000;

}

.alt{

height: 100px;

grid-column-start:1;

grid-column-end:3;

/* grid-column:start/end şeklinde de kullanılabilir.*/

grid-row-start: 4;

grid-row-end: 5;

border:10px solid #000;

}

CSS Grid Şabolunun Alanları İsimlendirerek Oluşturulması

CSS Grid Layout özelliklerinin bize sunduğu güzelliklerden biri de şablon yerleşimlerine isim vermektir. Bu özellik sayesinde tasarımları her şekilde esnetmek mümkün olmaktadır. Şablon alanlarına isim vererek grid-column-start, grid-column-end, grid-row-start, grid-row-end gibi özellikleri kullanamadan bölümleri yerleştirmek mümkündür.

Bu işlem için tek yapılması gereken Grid şablonuna grid-template-areas özelliğini yerleştirip aşağıdaki tasarıma uygun olarak şablonu şu şekilde çıkarmaktır.


    grid-template-areas:"ustbolum ustbolum"
                        "menalan menualan"
                        "solicerik sagicerik"
                        "alt alt";

grid-template-areas:"ustbolum ustbolum"

"menalan menualan"

"solicerik sagicerik"

"alt alt";

Yukarıdaki gibi şablonu oluşturduktan sonra şablonun parçalarını oluşturacak alanlara şablonda ki isimleri grid-area özelliği ile vermektir. Bu özellik kullanıldığında grid-column-start, grid-column-end, grid-row-start, grid-row-end özelliklerine gerek kalmayacaktır.

Şablonun yeni CSS kodları şu şekilde oluşacak ve sadeleşecektir.


body{
    margin:0;
}
.sayfa{
    display: grid;
    grid-template-columns: 350px 720px;
    grid-template-areas:"ustbolum ustbolum"
                        "menalan menalan"
                        "solicerik sagicerik"
                        "alt alt";
    grid-gap: 10px;
    width: 1080px;
    margin:auto;  
}
.ust{
    grid-area: ustbolum;
    height: 200px;
    border:10px solid #000;  
}

.menu{
    grid-area: menalan;
    height: 50px;
    border:10px solid #000;   
}

.sol{
    grid-area:solicerik;
    border:10px solid #000; 
}

.sag{
    grid-area:sagicerik;
    border:10px solid #000; 
}
.alt{
    grid-area:alt;
    height: 100px;
    border:10px solid #000; 
}

body{

margin:0;

}

.sayfa{

display: grid;

grid-template-columns: 350px 720px;

grid-template-areas:"ustbolum ustbolum"

"menalan menalan"

"solicerik sagicerik"

"alt alt";

grid-gap: 10px;

width: 1080px;

margin:auto;

}

.ust{

grid-area: ustbolum;

height: 200px;

border:10px solid #000;

}

.menu{

grid-area: menalan;

height: 50px;

border:10px solid #000;

}

.sol{

grid-area:solicerik;

border:10px solid #000;

}

.sag{

grid-area:sagicerik;

border:10px solid #000;

}

.alt{

grid-area:alt;

height: 100px;

border:10px solid #000;

}

Menü ve diğer bölümlerin oluşturulması

HTML: Alt bölümler dahil tüm kodlar aşağıdaki gibi oluşturulmuş oldu.


<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Grid Örnek</title>
        <link href="tasarim.css" rel="stylesheet">
    </head>
    <body>
        <div class="sayfa">
            <div class="ust">Üst bölüm</div>
            <div class="menu">
                <ul>
                    <li><a href="#">Sayfa</a></li>
                    <li><a href="#">Sayfa</a></li>
                    <li><a href="#">Sayfa</a></li>
                    <li><a href="#">Sayfa</a></li>
                </ul>
            </div>
            <div class="sol">
                <div class="kutu"></div>
                <div class="kutu"></div>
                <div class="kutu"></div>
            </div>
            <div class="sag">
                <h2>Lorem ipsum dolor sit amet</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
                <div class="kutu"></div>
                <div class="kutu"></div>
            </div>
            <div class="alt"></div>
        </div>
    </body>
</html>

<!doctype html>

<html>

<head>

<title>Grid Örnek</title>

</head>

<body>

<div class="ust">Üst bölüm</div>

<ul>

<li><a href="#">Sayfa</a></li>

</ul>

</div>

</div>

<h2>Lorem ipsum dolor sit amet</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

</div>

</div>

</body>

</html>

CSS:


body{
    margin:0;
}
.sayfa{
    display: grid;
    grid-template-columns: 350px 720px;
    grid-gap: 10px;
    width: 1080px;
    margin:auto;
    
}
.ust{
    height: 200px;
    grid-column-start:1;
    grid-column-end:3;
    /* grid-column:start/end  şeklinde de kullanılabilir.*/ 
    grid-row-start: 1;
    grid-row-end: 2;
    border:10px solid #000;  
}

.menu{
    height: 50px;
    grid-column-start:1;
    grid-column-end:3;
    /* grid-column:start/end  şeklinde de kullanılabilir.*/
    
    grid-row-start: 2;
    grid-row-end: 3;
    border:10px solid #000;
}

.sol{
    min-height: 300px;/*sonra kaldırılacak*/
    grid-column-start:1;
    grid-column-end:2;
    /* grid-column:start/end  şeklinde de kullanılabilir.*/
    
    grid-row-start: 3;
    grid-row-end: 4;
    border:10px solid #000; 
}

.sag{
    min-height: 300px;/*sonra kaldırılacak*/
    grid-column-start:2;
    grid-column-end:3;
    /* grid-column:start/end  şeklinde de kullanılabilir.*/
    
    grid-row-start: 3;
    grid-row-end: 4;
    border:10px solid #000; 
}
.alt{
    height: 100px;
     grid-column-start:1;
    grid-column-end:3;
    /* grid-column:start/end  şeklinde de kullanılabilir.*/
    
    grid-row-start: 4;
    grid-row-end: 5;
    border:10px solid #000; 
}

/*alt bölümlerin tasarımını eski teknikleri kullanrak da yapabiliriz artık.*/
.menu ul{
    margin:0;
    padding:0;
    list-style: none;
}
.menu ul li{
    float:left;
}
.menu ul li a{
    height: 50px;
    line-height: 50px;
    background: #cecece;
    color:#fff;
    display: block;
    width: 150px;
    margin:0 5px 0 0;
    text-align: center;
}
.sol .kutu{
   width: 300px;
    height: 200px;
    margin:10px;
    border:5px solid red;
    box-sizing: padding-box;
}

.sag h2,.sag p,.sag .kutu{
    margin:10px;
    font-size: 150%;
    text-align: justify; 
}

.sag .kutu{
    float:left;
    width: 320px;
    height: 200px;
    border:5px solid red;
}

100

101

102

103

104

105

body{

margin:0;

}

.sayfa{

display: grid;

grid-template-columns: 350px 720px;

grid-gap: 10px;

width: 1080px;

margin:auto;

}

.ust{

height: 200px;

grid-column-start:1;

grid-column-end:3;

/* grid-column:start/end şeklinde de kullanılabilir.*/

grid-row-start: 1;

grid-row-end: 2;

border:10px solid #000;

}

.menu{

height: 50px;

grid-column-start:1;

grid-column-end:3;

/* grid-column:start/end şeklinde de kullanılabilir.*/

grid-row-start: 2;

grid-row-end: 3;

border:10px solid #000;

}

.sol{

min-height: 300px;/*sonra kaldırılacak*/

grid-column-start:1;

grid-column-end:2;

/* grid-column:start/end şeklinde de kullanılabilir.*/

grid-row-start: 3;

grid-row-end: 4;

border:10px solid #000;

}

.sag{

min-height: 300px;/*sonra kaldırılacak*/

grid-column-start:2;

grid-column-end:3;

/* grid-column:start/end şeklinde de kullanılabilir.*/

grid-row-start: 3;

grid-row-end: 4;

border:10px solid #000;

}

.alt{

height: 100px;

grid-column-start:1;

grid-column-end:3;

/* grid-column:start/end şeklinde de kullanılabilir.*/

grid-row-start: 4;

grid-row-end: 5;

border:10px solid #000;

}

/*alt bölümlerin tasarımını eski teknikleri kullanrak da yapabiliriz artık.*/

.menu ul{

margin:0;

padding:0;

list-style: none;

}

.menu ul li{

float:left;

}

.menu ul li a{

height: 50px;

line-height: 50px;

background: #cecece;

color:#fff;

display: block;

width: 150px;

margin:0 5px 0 0;

text-align: center;

}

.sol .kutu{

width: 300px;

height: 200px;

margin:10px;

border:5px solid red;

box-sizing: padding-box;

}

.sag h2,.sag p,.sag .kutu{

margin:10px;

font-size: 150%;

text-align: justify;

}

.sag .kutu{

float:left;

width: 320px;

height: 200px;

border:5px solid red;

}

CSS Grid: Web Sayfası Şabolunu Oluşturma

CSS Grid Şabolunun Oluşturulması

CSS Grid Şabolunun Alanları İsimlendirerek Oluşturulması

Menü ve diğer bölümlerin oluşturulması

İlgili

Yorum Yap X

CSS Grid Şabolunun Oluşturulması

CSS Grid Şabolunun Alanları İsimlendirerek Oluşturulması

Menü ve diğer bölümlerin oluşturulması

Bunu paylaş:

İlgili

İlginizi Çekebilir

Yorum Yap X