RWD grid ko‘rinishi

Grid-View nima?

Ko‘pgina veb-sahifalar grid-view asosida quriladi, ya’ni sahifa qatorlar va ustunlarga bo‘linadi.

Moslashuvchan grid-view odatda 6 yoki 12 ustunga ega bo‘ladi va brauzer oynasi o‘lchamini o‘zgartirganingizda kichrayadi hamda kengayadi.

Grid View yaratish

Grid-view qurishni boshlaylik.

Avval barcha HTML elementlarida box-sizing xossasi border-box qilib belgilanganiga ishonch hosil qiling. Bu padding va chegaraning elementlarning umumiy kengligi hamda balandligiga kirishini ta’minlaydi.

Quyidagini CSS’ingizning boshiga qo‘shing:

* {
box-sizing: border-box;
}

box-sizing xossasi haqida CSS Box Sizing bobimizda ko‘proq o‘qing.

HTML qismi

Beshta grid elementdan iborat grid konteyner yaratamiz (header, menu, content, facts, footer):

HTML

Mana to‘liq HTML:

<div class="grid-container">

<div class="header"><h1>Chania</h1></div>

<div class="menu">
<ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
</ul>
</div>

<div class="content">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete.</p>
<p>The city can be divided in two parts, the old town and the modern city. The old town is situated next to the old harbour and is the matrix around which the whole urban area was developed.</p>
<p>Chania lies along the north west coast of the island Crete.</p>
</div>

<div class="facts">
<h2>Facts:</h2>
<ul>
    <li>Chania is a city on the island of Crete</li>
    <li>Crete is a Greek island in the Mediterranean Sea</li>
</ul>
</div>

<div class="footer"><p>A footer.</p></div>

</div>

CSS qismi

Uni yaxshiroq ko‘rinishga keltirish uchun ba’zi uslublar va ranglar qo‘shamiz:

Eslatma: Turli ekran o‘lchamlari uchun media so‘rovlar va breakpointlar qo‘shish uchun keyingi bobga qarang!

Misol

Mana to‘liq CSS:

* {
box-sizing: border-box;
}

body {
font-family: "Lucida Sans", sans-serif;
font-size: 17px;
}

.grid-container {
display: grid;
grid-template-areas:
'header'
'menu'
'main'
'facts'
'footer';
background-color: white;
gap: 10px;
}

.header {
grid-area: header;
background-color: purple;
text-align: center;
color: #ffffff;
}

.header > h1 {
font-size: 40px;
}

.menu {
grid-area: menu;
}

.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
}

.menu li:hover {
background-color: #0099cc;
}

.content {
grid-area: main;
}

.content > h1 {
font-size: 30px;
margin-bottom: 7px;
}

.content > p {
margin-bottom: 7px;
}

.facts {
grid-area: facts;
border: 1px solid #0099cc;
background-color: beige;
padding: 10px;
}

.facts > h2 {
font-size: 20px;
}

.facts li {
margin-bottom: 5px;
}

.footer {
grid-area: footer;
background-color: #0099cc;
color: #ffffff;
text-align: center;
}

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish