حدد File > New Fluid Grid Layout.

القيمة الافتراضية لعدد الأعمدة الموجودة في الشبكة معروضة في منتصف نوع الوسائط. لتخصيص عدد الأعمدة لجهاز، قم بتحرير القيمة على النحو المطلوب.

لتعيين عرض الصفحات مقارنة بحجم الشاشة، قم بتعيين القيمة بالنسبة المئوية.

يمكنك تغيير عرض هامش التوثيق بالإضافة إلى ذلك. هامش التوثيق هو المسافة بين عمودين.

حدد خيارات CSS للصفحة.

عند النقر فوق Create، سيطلب منك تحديد ملف CSS. يمكنك القيام بأي من الإجراءات التالية:

• إنشاء ملف CSS جديد.
• فتح ملف CSS حالي.
• حدد ملف CSS المفتوح كملف CSS لشبكة مرنة.

يتم عرض الشبكات المرنة للهواتف المحمولة افتراضيًا. كما يتم أيضًا عرض لوحة Insert للشبكة المرنة. استخدم خيارات اللوحة Insert لإنشاء التخطيط.

للتحويل لتصميم التخطيط لأجهزة أخرى، انقر فوق الرمز المناظر في الخيارات الموجودة أسفل العرض Design.

احفظ الملف. عند حفظ ملف HTML، سيُطلب منك حفظ الملفات التابعة مثل boilerplate.css وrespond.min.js في موقع على الكمبيوتر. حدد موقعًا وانقر فوق Copy.

ملف boilerplate.css مستند إلى النص الأساسي لـ HTML5. وهو عبارة عن مجموعة من أنماط CSS التي تضمن اتساق عرض صفحة الويب عبر العديد من الأجهزة. ملف respond.min.js هو مكتبة JavaScript تساعد في توفير الدعم لاستعلامات الوسائط في الإصدارات السابقة من المستعرض. 

في اللوحة Insert، حدد العنصر الذي تريد إدراجه.

في مربع الحوار الذي يظهر، حدد فئة أو أدخل قيمة للمعرف. تعرض القائمة Class الفئات من ملف CSS الذي حددته عند إنشاء الصفحة.

حدد خانة الاختيار Insert As Fluid Element.

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