响应式网页设计 - 网格视图

什么是网格视图？

许多网页都基于网格视图（grid-view），这意味着页面被分割为几列：

在设计网页时，使用网格视图非常有帮助。这样可以更轻松地在页面上放置元素。

响应式网格视图通常有 12 列，总宽度为 100％，并且在调整浏览器窗口大小时会收缩和伸展。

构建响应式网格视图

让我们开始构建响应式网格视图。

首先，确保所有 HTML 元素的 box-sizing 属性设置为 border-box这样可以确保元素的总宽度和高度中包括内边距（填充）和边框。

请在 CSS 中添加如下代码：

* {
  box-sizing: border-box;
}

请在我们的 حجم الصندوق CSS 在章节中阅读有关 box-sizing 属性的更多内容。

下面的例子展示了一个简单的响应式网页，其中包含两列：

25%
75%

النموذج

.menu {
  عرض: 25%;
  float: left;
}
.main {
  عرض: 75%;
  float: left;
}

جرب بنفسك

إذا كانت صفحة الويب تحتوي فقط على عمودين، فإن المثال السابق جيد جدًا.

لكن، نريد استخدام رقعة الشبكة الم��رة التي تحتوي على 12 عمودًا لتحكم أفضل في صفحة الويب.

أولاً، يجب علينا حساب نسبة العمود: 100% / 12 عمود = 8.33%.

ثم، سنقوم بإنشاء فئة لكل عمود من الأعمدة الـ 12، أي class="col-" وعددًا صحيحًا، والذي يحدد عدد الأعمدة التي يجب أن تمر عبر هذا القسم:

CSS:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

جرب بنفسك

جميع هذه الأعمدة يجب أن تطفو إلى اليسار وأن يكون لها هامشًا داخليًا قدره 15px:

CSS:

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

كل سطر يجب أن يكون محاطًا في <div> مجموع عدد الأعمدة في السطر يجب أن يكون دائمًا 12:

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

جميع الأعمدة الموجودة في السطر تطفو إلى اليسار، مما يؤدي إلى خروجها من تدفق الصفحة، مما يؤدي إلى وضع العناصر الأخرى، وكأن هذه الأعمدة غير موجودة. لتجنب هذا الوضع، سنضيف أنماط تنظيف التدفق:

CSS:

.row::after {
  content: "";
  clear: both;
  display: table;
}

نريد إضافة بعض الأنماط والألوان لجعلها تبدو أكثر جمالًا:

النموذج

html {
  font-family: "Lucida Sans", sans-serif;
}
.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
  background-color: #0099cc;
}

جرب بنفسك

يرجى ملاحظة أن موقع الويب في الأمثلة لا يبدو رائعاً عندما يتم ضبط عرض نافذة المتصفح إلى عرض صغير جدًا. ستعلم كيفية حل هذه المشكلة في الفصل التالي.