CSS kullanarak web tasarımlarınızda etkili bir görünüm elde edebilirsiniz Absolute ve relative pozisyonlama, Flexbox ve Grid sistemleri gibi teknikleri kullanarak öğelerin yerleştirilmesi ve hizalanması konusunda daha fazla kontrol sağlayabilirsiniz Absolute pozisyonlama özelliği, diğer öğelerin konumuyla ilgilenmeden öğelerin mutlak konumlarını belirlerken, relative pozisyonlama özelliği öğelerin konumu konusunda diğer öğelerle ilişkili olmasını sağlar Flexbox sistemleri öğelerin yatay veya dikey olarak hizalanmasını sağlar, Grid sistemleri ise daha karmaşık tasarımların düzenlenmesinde kullanılır Birbirinden farklı bu özellikler, tasarımcılara, web sayfalarının düzenlenmesinde çeşitli alternatifler sunmaktadır Flexbox ve Grid sistemleri, mobil uyumlu tasarımlarda da oldukça kullanışlıdırlar ve proje ekibinin mobil uyumlu bir web sitesi sunmasını kolaylaştırırlar

CSS kullanarak web tasarımlarınızda göz alıcı bir etki yaratabilirsiniz. Öğelerin doğru pozisyonlandırılması, kullanıcıların daha kullanışlı bir deneyim yaşamasına yardımcı olur. Ancak, CSS pozisyonlandırma özellikleri bazılarımız için biraz karmaşık gelebilir. Bu makalede, basit tasarımlarınızda öğeleri daha çekici hale getirmek için ihtiyacınız olan ipuçlarını bulacaksınız.

Absolute ve relative pozisyonlama, Flexbox ve Grid sistemleri gibi teknikleri kullanarak web sayfanızda öğeleri yerleştirme ve dizme konusunda daha fazla kontrol sahibi olabilirsiniz. Absolute pozisyonlama, öğelerin mutlak konumlarını belirlerken, relative pozisyonlama, öğelerin yine konumlarını belirler ancak diğer öğelerle olan ilişkileri de dikkate alır. Flexbox ve Grid sistemleri, öğelerin hizalaması ve sıralaması ile ilgili daha gelişmiş özelliklere sahiptir.

Bu özellikleri kullanarak, öğeleri yarattığınız tasarımda tam olarak nereye yerleştirmek istediğinize karar verebilirsiniz. Ayrıca, örnekler ile birlikte uygulamalı olarak öğrenebilir ve deneyebilirsiniz.

Absolute ve Relative Pozisyonlama Arasındaki Fark

Absolute ve relative pozisyonlama özellikleri, CSS öğelerinin belirli bir konuma yerleştirilmesinde kullanılır. Absolute pozisyonlama özelliği, HTML belgesi içindeki başka bir öğe tarafından belirlenen konuma göre öğeyi konumlandırmaz. Bu nedenle, bu özellik öğelerin sabit bir konumda kalması gerektiğinde kullanışlıdır. Relative pozisyonlama özelliği, öğenin normal konumuna göre belirli bir ölçüde hareket etmesine izin verir. Bu özellik, öğelerin birbirinin üstünde, altında veya yanında hizalanması için kullanılabilir.

Örneğin, bir HTML sayfasında bir resim ve altındaki bir başlık olsun. Eğer resim, başlıktan daha büyükse, absolute pozisyonlama özelliği kullanarak resmi üstte tutabilirsiniz. Ancak, relative pozisyonlama özelliği kullanarak resmi konumlandırmak, başlığın altında konumlandırmak istediğinizde kullanışlıdır.

Flexbox ve Grid Sistemi Kullanımı

CSS kullanırken öğelerin doğru bir şekilde pozisyonlandırılması, basit bir tasarımı bile daha çekici hale getirebilir. Bu nedenle, Flexbox ve Grid sistemleri gibi modern teknikleri kullanarak, öğelerin belirli bir düzeyde pozisyonlandırılması gerekmektedir.

Flexbox, öğelerin yatay veya dikey olarak hizalanmasına izin veren bir sistemdir. Öğeleri hizalamak için, özellikle "justify-content" ve "align-items" özellikleri kullanılabilir. "justify-content", öğeleri yatay olarak hizalar, "align-items" ise dikey olarak hizalar. Bu özelliklerin kullanımı, sayfadaki öğelerin daha iyi bir şekilde düzenlenmesini sağlar.

Bununla birlikte, "flex-wrap" özelliği de kullanılabilir. Bu özellik, öğelerin sıralamasını, düzenlemesini ve pozisyonlandırmasını değiştirebilir. "nowrap", tüm öğelerin tek bir hizada kalmasını sağlar, "wrap" ise öğelerin birden fazla satıra dağılmasına izin verir.

Grid sistemleri, daha karmaşık tasarımları düzenlemek için kullanışlıdır. "grid-template-columns" ve "grid-template-rows" özellikleri kullanılarak, sayfa üzerinde belirli bir düzen oluşturma imkanı sağlarlar. "grid-template-areas" özelliği, öğeleri belirli bir düzene yerleştirmenize yardımcı olabilir. Bu özellikler, kolayca kullanılabilir ve özellikle dinamik sayfalar için idealdir.

Farklı sistemlerin kullanımında, örneklerle uygulamalar yaparak daha iyi bir kavrayışa sahip olunabilir. Bununla birlikte, Flexbox ve Grid sistemleri, mobil uyumlu web tasarımlarında da oldukça kullanışlıdır. Mobil uyumlu tasarımlar, özellikle kullanıcı deneyimini arttırma konusunda son derece önemlidir.

Flexbox ve Grid sistemleri, tasarımcılara, mobil uyumlu tasarımlar oluştururken kesinlikle göz önünde bulundurması gereken araçlardır. Mobil cihazlarının ekran boyutları, farklılık gösterdiği için tasarımların bu boyutlara uygun hale getirilmesi gerekmektedir. Güçlü bir Flexbox ve Grid sistemi uygulaması, proje ekibinin mobil uyumlu bir web sitesi örneği sunmasını kolaylaştırır.

Flexbox Sistemi

Flexbox sistemi, öğelerin belirli bir düzeyde pozisyonlandırılması için kullanılan bir CSS özelliğidir. Özellikle responsive tasarımlarda oldukça faydalıdır.

Flexbox sistemi ile öğelerin pozisyonlandırılması için kullanabildiğimiz CSS özellikleri şunlardır:

• display: flex veya inline-flex değerini alır. flex, öğelerin bir arada yer aldığı bir flex container'ı ifade ederken, inline-flex öğeleri satır içinde yer alacak şekilde pozisyonlandırır.
• flex-direction: öğelerin yönünü belirler. row, row-reverse, column, column-reverse değerlerini alabilir.
• justify-content: öğelerin yatay konumunu belirler. flex-start, flex-end, center, space-between, space-around, space-evenly değerleri kullanılabilir.
• align-items: öğelerin dikey konumunu belirler. flex-start, flex-end, center, baseline, stretch değerleri kullanılabilir.
• align-self: tek bir öğenin dikey konumunu belirler.
• flex-wrap: öğelerin sıralanması ve düzenlenmesi için kullanılır. nowrap, wrap, wrap-reverse değerlerini alabilir.
• flex-grow: öğelerin büyüme oranını belirler.
• flex-shrink: öğelerin küçülme oranını belirler.
• flex-basis: öğelerin başlangıç boyutunu belirler.

Bu özelliklerle birlikte öğelerin isimlendirilmesi ve sayfadaki ögelerin ilişkilendirilmesi de oldukça önemlidir. Örnek olarak aşağıdaki kodu inceleyebilirsiniz:

<div class="flex-container">  <div class="item">Öğe 1</div>  <div class="item">Öğe 2</div>  <div class="item">Öğe 3</div></div>

.flex-container {  display: flex;  justify-content: center;}.item {  flex: 1;}

Bu örnekte, flex-container sınıfına flex özelliği eklenerek öğelerin yatay konumları belirlenmiştir. Ayrıca, item sınıfına da flex özelliği eklenerek item öğelerinin sayfa genelinde eşit oranda paylaştırılması sağlanmıştır.

justify-content ve align-items Özellikleri

CSS Flexbox'un kullanımı sırasında, öğelerin belirli bir düzeyde hizalanması çok önemlidir. Bu, sayfanın görünümünü daha düzenli ve estetik hale getirebilir. 'justify-content' ve 'align-items' CSS özellikleri bu konuda oldukça yardımcıdır.

'justify-content' özellikleri kullanılırken, öğelerin yatayda hizalanması sağlanabilir. Bu, bir arada bulunan birkaç öğeyi birbirine sıkıca kenetleyerek, ortalanmalarını sağlar. Örneğin, bir menüdeki seçenekleri ortalamak istiyorsanız, 'justify-content' özelliğini 'center' olarak tanımlayabilirsiniz.

'align-items' özelliği, öğeleri dikey olarak hizalamak için kullanılır. Örneğin, sayfanın üst kısmına bir logo koymak istediğinizi varsayalım. 'align-items' özelliğini 'center' olarak tanımlayarak, logonun dikey konumunu kolayca ayarlayabilirsiniz.

Yukarıdaki tablo, hangi durumlarda hangi seçeneği kullanabileceğinize karar vermenize yardımcı olabilir. Bu özelliklerin kullanımını öğrendikten sonra, Flexbox sayfalarınızı daha estetik hale getirmek için harika bir araçtır.

Flex-wrap Özelliği

Flex-wrap özelliği, birden fazla öğenin tek bir satırda sığmaması durumunda, öğelerin sıralanması, düzenlenmesi ve pozisyonlandırılması için kullanılır. Bu özellik sayesinde, öğelerin sayısı artsa bile satır sonuna gelindiğinde diğer bir sıraya geçebilirler. Bu, öğelerin düzgün bir şekilde sıralanmasını ve sayfada hoş bir görünüm oluşturulmasını sağlar.

Flex-wrap özelliğinin kullanımı oldukça kolaydır. Örneğin, bir div etiketi içinde birden fazla yazı veya resim elemanı olsun. Bu elemanların tek bir satırda sığması imkansız olsun. Bu durumda, bu elemanları tek tek sıralamak yerine aynı hizada devam ederek diğer bir satıra geçmeleri için flex-wrap özelliği kullanılabilir.

div {  display: flex;  flex-wrap: wrap;}

Bu kodda, flex-wrap özelliği wrap olarak tanımlandı. Bu sayede, elemanlar alt satıra doğru devam edebilirler. Ayrıca, diğer flex özellikleri gibi, flex-direction ve justify-content özellikleri ile birlikte kullanılabilir. Böylece daha detaylı bir düzenleme sağlanabilir.

Grid Sistemi

HTML ve CSS kullanarak web tasarımı yaparken, sayfanın bölümlerini işlevsel ve estetik hale getirmek için tasarım öğelerinin doğru yerleştirilmesi önemlidir. Bu yazıda, özellikle Grid sistemi kullanarak öğelerin nasıl pozisyonlandırılacağına dair ipuçlarından bahsedeceğiz.

Grid Sistemi, bir sayfanın bölümlerinin belirli bir düzen içinde konumlandırılabilmesini sağlar. Bu sistem CSS Grid özelliklerinin kullanımını gerektirir ve CSS Grid, web sayfasında farklı boyut ve yerleşimlerde kutular oluşturmaya yarayan bir yapıdır.

Grid sistemi özellikle büyük ve karmaşık düzenlerde kullanılabilecek bir araçtır. Bir sayfada iki veya daha fazla bölüm yer alacaksa, bu alanların birbirine göre düzenlenmesi için CSS Grid özellikleri kullanılabilir.

CSS Grid, grid-template-columns ve grid-template-rows özellikleri ile belirli bir düzen oluşturarak sayfadaki öğeleri pozisyonlandırır. Ayrıca grid-template-areas özelliği de kullanılarak sayfanın tasarımı daha kolay hale getirilebilir. Bu özellik sayfada bölümler belirleyebilir ve bu bölmelere ad vererek daha sonrasında kolay bir şekilde hareket ettirebilmesini sağlar.

Sayfadaki öğelerin Grid sistemi kullanılarak alandan tasarruf edilmesi sağlanır. Bu yöntem aynı zamanda yanıt verebilir bir tasarım için de faydalıdır. Sayfa boyutu ne kadar küçülürse, Grid sistemi öğeler de buna göre otomatik olarak yeniden konumlandırılır.

Sonuç olarak, Grid sistemi CSS kullanarak sayfa tasarımında öğelerin nasıl pozisyonlandırılacağına dair farklı teknikler sunar. Bu teknikler yardımıyla sayfa düzeni basit ve net bir şekilde hazırlanabilir.

Grid-template-columns ve grid-template-rows Özellikleri

Grid-template-columns ve grid-template-rows özellikleri, Grid sistemini kullanarak sütun ve satırların boyutlarını ve yerleşimini belirlemek için kullanılır. Bu özellikler, Grid sisteminin en temel yapı taşlarındandır ve CSS kodlamasında büyük bir fark yaratır. Grid-template-columns özelliği ile sütunların boyutlarını, grid-template-rows özelliği ile ise satırların boyutlarını belirleriz.

Bu özellikler sayesinde, sabit bir düzen oluşturabilir ve içerikleri daha belirgin bir şekilde gösterebiliriz. Birden fazla sütun veya satır oluşturmak mümkündür ve boyutları farklı şekillerde ayarlayabiliriz. Örneğin, üç eşit genişlikte sütun belirlemek için şu kodu kullanabiliriz:

Bu kodda "1fr" ifadesi, her bir sütunun eşit genişliğe sahip olmasını sağlar. Aynı şekilde, farklı boyutlarda sütunlar oluşturmak da mümkündür. Örneğin, genişliği 2 katına çıkacak olan ilk sütuna sahip bir Grid sistemi için şu kodu kullanabiliriz:

Bu kodla birlikte, Grid sistemi ilk sütunu 2 kat genişletirken, diğer sütunların genişlikleri eşit kalacak şekilde ayarlanır. Grid yapısında satırların boyutlarını belirlemek de aynı şekilde yapılır.

Kısacası, Grid-template-columns ve grid-template-rows özellikleri, Grid yapısında bir çok özelleştirme yapmanıza olanak sağlar. Bu özelliklerin tam hakimiyeti sayesinde, etkili bir tasarım oluşturmak mümkündür.

Grid-template-areas Özelliği

Grid-template-areas özelliği, CSS Grid sistemi ile öğelerin yerleşimlerini belirlemek için kullanılır. Bu özellik, öğelerin sıralamasını ve hangi alanda yer alacağını belirlemek için kullanılabilir. Bu sayede öğelerin sıralanması kolaylaşır ve sayfa tasarımı daha düzenli hale gelir.

Öncelikle bir grid-template-areas oluşturmak için, alanların isimleri belirlenir ve bu isimlerin her eksende sıralanması sağlanır. Örneğin, aşağıdaki tabloda 3x3'lük bir alan oluşturulmuştur ve bu alana isimler atanmıştır:

Bu isimlendirmelerin ardından, bu özellik öğelerin CSS koduna eklenerek kullanılabilir. Örneğin, aşağıdaki kodda grid-template-areas özelliği kullanılarak üç sütun ve üç satırdan oluşan bir Grid layout oluşturulmuştur:

```css.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 200px 50px; grid-template-areas: "header header header" "sidebar content content" "sidebar content content" "footer footer footer";}

.header { grid-area: header;}.sidebar { grid-area: sidebar;}.content { grid-area: content;}.footer { grid-area: footer;}```

Bu örnekte, grid-template-areas özelliği ile 3x3'lük bir alan oluşturulmuş ve her alanın adı belirlenmiştir. Ardından, öğelerin grid alanlarına yerleştirilmesi için grid-area özelliği kullanılmıştır. Bu sayede, her öğenin sıralanması ve alanına göre yerleştirilmesi sağlanmıştır.

Grid-template-areas özelliği, içerisine girilen değerlerin grid layout'u belirlediği için, kuralları doğru bir şekilde oluşturmak oldukça önemlidir. Özellikle büyük ve karmaşık tasarımlarda kullanılırsa, kodlama süreci oldukça kolaylaşır ve tasarım daha düzenli hale gelir.

Örneklerle Pozisyonlandırma Uygulamaları

CSS öğelerinin pozisyonlandırılması, web tasarımının temel parçalarından biridir. Etkileyici web sitelerinin temelinde doğru pozisyonlandırma yer almaktadır. Bu nedenle, doğru öğeleri doğru yerlere yerleştirmek için CSS özellikleri kullanılır. Peki, öğelerin doğru bir şekilde pozisyonlandırıldığını nasıl bilebiliriz? İşte, sizler için hazırladığımız uygulamalı örnekler:

Absolute Pozisyonlama Uygulaması:
Örnek bir sayfa tasarımında navigasyon menüsüyken, sayfanın sol tarafında duran bir açılır pencere nasıl oluşur? İşte cevabı:

Flexbox ve Grid Sistemi Uygulamaları:
CSS flexbox ve grid sistemi pozisyonlandırma için en sık kullanılan araçlar arasında yer alır. Belli bir tasarımı oluşturmak için HTML öğeleri arasındaki ilişkilerini belirlerler. Mobil uyumlu tasarımlar oluşturmak içinse flexbox ve grid sistemi kullanımı kaçınılmaz hale gelir. İşte, flexbox ve grid sistemleri ile ilgili örnekler:

• Örnek 1: Kırmızı bir kutunun ortasında 3 adet beyaz kutu nasıl durur?
  Kod:
  
  

  HTML	CSS
  <div class="flex-container"> <div class="flex-item red">Kırmızı Kutu</div> <div class="flex-item white">Beyaz Kutu</div> <div class="flex-item white">Beyaz Kutu</div> <div class="flex-item white">Beyaz Kutu</div> </div>	.flex-container { display: flex; justify-content: center; align-items: center; height: 400px; background-color: lightgray; } .flex-item { width: 100px; height: 100px; margin: 10px; text-align: center; font-size: 30px; } .red { background-color: red; } .white { background-color: white; }

Bu kod, HTML kısmında bir flex-container içinde kırmızı renkte bir div.red, beyaz renkte üç adet div.white kullanır. CSS kısmında ise, flex-container elemanlarının dikey ve yatay merkeze konumlandırılması için justify-content ve align-items özellikleri kullanılır.

Mobil Uyumlu Tasarım:
Mobil uyumlu tasarım, modern web tasarımının olmazsa olmazlarından biridir. Responsive tasarım, her boyut ve cihazda sorunsuz çalışır. İşte flexbox ve grid sistemleri ile mobil uyumlu tasarım örnekleri:

• Örnek 1: Mobil uyumlu bir menü
  Kod:
  
  

  HTML

  CSS

  <div class="bifocal"> <div class="menuicon"> <span></span> <span></span> <span></span> </div> <div class="header"> <h1>Mobil Uyumlu Menü</h1> </div> <ul class="navlist"> <li><a href="#">Anasayfa</a></li> <li><a href="#">Hizmetler</a></li> <li><a href="#">Hakkımızda</a></li> <li><a href="#">İletişim</a></li> </ul> </div>

  .bifocal { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background-color: #333333; height: 100vh; } .menuicon { display: flex; flex-direction: column; justify-content: space-around; height: 26px; cursor: pointer; padding: 10px; } .menuicon span { width: 26px; height: 3px; background-color: #fff; } .header { color: #fff; margin-top: 20%; } .navlist { display: none; list-style-type: none; margin-top: 40%; width: 100%; text-align: center; }

Bu kod, HTML kısmında bir bifocal isimli div içinde menü butonları ve divler oluşturuyor. CSS kısmında ise, bifocal ve menüicon elemanlarının tasarımı için flex-direction, justify-content, ve align-items özellikleri kullanılır. Menü butonu için ise, cursor ve padding özellikleri kullanılır ve menü açılır!

Absolute Pozisyonlama Uygulaması

Bir sayfa tasarımının belirli öğelerini diğerlerinin üzerine yerleştirmeniz gerektiğinde, mutlaka absolute pozisyonlama özelliğini kullanmanız gerekir. Bu özellik için öncelikle bir div etiketi oluşturmanız ve içerisine belirli öğeleri eklemeniz gerekir. Örneğin, bir sayfa tasarımında resimlerin üzerine yazı ya da butonların yerleştirilmesi gerektiğinde absolute pozisyonlama özelliğini kullanırsınız.

Bir sayfa tasarımında absolute pozisyonlama özelliğini kullanmak için aşağıdaki adımları izleyebilirsiniz:

• <div> etiketi oluşturun ve içerisine belirli öğeleri ekleyin.
• CSS kısmında, belirlediğiniz <div> etiketini seçin ve position: absolute; kodunu ekleyin.
• Öğelerin sayfa içerisindeki konumunu belirlemek için top, bottom, right, left gibi özellikleri kullanın.

Örneğin, bir sayfa tasarımında ekranda gösterilecek olan resmin üzerine buton yerleştirmek istediğinizi düşünelim. Bunun için bir <div> etiketi oluşturarak resmi ve butonu içerisine ekleyebilirsiniz. Ardından, CSS kısmına geçerek oluşturduğunuz <div> etiketini seçin ve position: absolute; kodunu ekleyin. Butonun resmin sağ üst kısmına konumlanması için ise top: 20px; ve right: 20px; gibi özellikleri kullanabilirsiniz.

<div>  <img src="resim.jpg">  <button>Detaylı Bilgi</button></div>      

div {  position: absolute;  top: 20px;  right: 20px;}      

Bu örnek sayfa tasarımı oluşturarak, absolute pozisyonlama özelliğinin nasıl kullanıldığını öğrenebilirsiniz. Ancak, bu özellikle dizayn edilen tasarımlarda responsive uyumda sorun yaşanabilir. Bu nedenle, tasarımlarınızda mobil uyumlu olması için flexbox ve grid sistemlerini kullanmanızı öneririz.

Flexbox ve Grid Sistemi Uygulamaları

Flexbox ve Grid sistemleri, CSS kullanarak öğelerin pozisyonlandırılmasında oldukça kullanışlıdır. Özellikle web tasarımcıların tercih ettiği bu sistemler, öğelerin belirli bir düzeyde pozisyonlandırılmasını sağlar. Flexbox, özellikle düzenli bir şekilde ekrana sığdırılması gereken içeriklerin pozisyonlandırılmasında oldukça etkilidir. Grid sistemleri ise özellikle sayfanın belirli bir şekilde sütunlara ayrılması gerektiği durumlarda kullanılır. Bu sayede içeriklerin oldukça düzenli bir şekilde bir araya getirilmesi sağlanır.

Flexbox ve Grid sistemlerine ait birkaç örnek üzerinden pozisyonlandırma uygulamalarını anlatmak gerekirse; öncelikle Flexbox sistemiyle bir örnek verebiliriz. Bir menüyü ekrana sığdırmak için özellikle tercih edilen bu sistemde, öğelerin sıralanması ve hizalanması oldukça kolaydır. Grid sistemleri ise özellikle blog sayfalarında kullanılır ve içeriklerin belirli bir şekilde pozisyonlandırılmasını sağlar.

• Flexbox uygulaması örneği: Menüyü ekranın belirli bir bölgesinde sabit tutmak için position: fixed özelliği kullanılır. Bu sayede menü, sayfa scroll edilse bile sabit kalır.
• Grid sistemleri uygulama örneği: Blog sayfasında belirli bir içeriği sütunlara ayırmak için grid-template-columns özelliği kullanılır. Bu sayede içerikler düzenli bir şekilde sıralanır.

Flexbox ve Grid sistemleri, CSS kullanarak öğelerin pozisyonlarını belirlemek için oldukça kullanışlıdır. Bu özelliklerin kullanımı sayesinde öğelerin düzenli bir şekilde sıralanması sağlanır ve kullanıcıların görsel deneyimi de arttırılmış olur.

Mobil Uyumlu Tasarım

Mobil cihazların yaygınlaşmasıyla birlikte, web sitelerinin mobil uyumlu hale getirilmesi önem kazanmıştır. CSS Flexbox ve Grid sistemleri, mobil uyumlu tasarımlarda oldukça kullanışlıdır. Bu sistemler, ögelerin mobil cihaz ekranlarına göre otomatik olarak pozisyonlandırılmasına yardımcı olur.

Flexbox sistemi, mobil uyumlu tasarımlarda öğelerin sıralanması için önemli bir araçtır. Örneğin, bir menü oluştururken, menü öğelerini yatay olarak sıralayabilir ve mobil cihaz ekranında dikey olarak sıralamak için flex-wrap özelliğini kullanabilirsiniz. Grid sistemi ise öğelerin mobil cihaz ekranına göre doğru bir şekilde sıralanmasını sağlamak için tasarlanmıştır. Grid-template-areas özelliği, mobil uyumlu tasarımlarda öğeleri sıralarken oldukça kullanışlıdır. Mobil cihazlarda sayfanın tüm öğelerini doğru bir şekilde sıralamak için Grid-template-columns ve grid-template-rows özellikleri kullanılabilir.

Mobil uyumlu bir tasarım oluşturmak, sadece responsive bir tasarım değildir. Responsive tasarım, yalnızca cihaz ekranlarının boyutunu dikkate alarak öğeleri yeniden boyutlandırırken, mobil uyumlu tasarım cihaz ekranlarına göre öğeleri pozisyonlandırır. Bu nedenle, mobil uyumlu tasarımlar oluştururken, CSS Flexbox ve Grid sistemlerini kullanmak oldukça önemlidir.