گرډ سیسټم
د دولس کالم سیسټم ، پنځه ډیفالټ ځواب ویونکي ټایرونو ، Sass متغیرونو او مکسینونو ، او لسګونه دمخه تعریف شوي ټولګیو څخه مننه د ټولو شکلونو او اندازو ترتیبونو رامینځته کولو لپاره زموږ د ګرځنده - لومړی فلیکس بکس گرډ وکاروئ.
د بوټسټریپ گرډ سیسټم د مینځپانګې ترتیب او تنظیم کولو لپاره یو لړ کانټینرونه ، قطارونه او کالمونه کاروي. دا د فلیکس باکس سره جوړ شوی او په بشپړ ډول ځواب ویونکی دی. لاندې یو مثال او ژور نظر دی چې څنګه گرډ سره یوځای کیږي.
د فلیکس باکس سره نوي یا ناپیژندل شوي؟ د شاليد، اصطلاحاتو، لارښوونو، او کوډ ټوټو لپاره دا د CSS چالونو فلیکس بکس لارښود ولولئ .
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
پورتني مثال زموږ د مخکیني تعریف شوي گرډ ټولګیو په کارولو سره په کوچني ، متوسط ، لوی او اضافي لوی وسیلو کې درې مساوي پلن کالمونه رامینځته کوي. دا کالمونه د مور او پلار سره په پاڼه کې متمرکز دي .container
.
دا ماتول، دلته دا څنګه کار کوي:
- کانټینرونه ستاسو د سایټ مینځپانګې مرکز او افقی ډول پیډ کولو لپاره وسیله چمتو کوي.
.container
د ځواب ویونکي پکسل چوکۍ لپاره یا.container-fluid
دwidth: 100%
ټولو لید پورټ او وسیلې اندازې لپاره وکاروئ . - قطارونه د کالمونو لپاره ریپرونه دي. هر کالم د
padding
دوی تر مینځ د ځای کنټرول لپاره افقی (د ګټر په نوم یادیږي) لري. داpadding
بیا په قطارونو کې د منفي حاشیو سره مقابله کیږي. په دې توګه، ستاسو په کالمونو کې ټول مینځپانګه په بصري توګه د ښي خوا سره سمون لري. - په گرډ ترتیب کې، مینځپانګه باید په کالمونو کې ځای په ځای شي او یوازې کالمونه ممکن د قطارونو سمدستي ماشومان وي.
- د فلیکس باکس څخه مننه، پرته د مشخص شوي گرډ کالمونه
width
به په اوتومات ډول د مساوي عرض کالمونو په توګه ترتیب کړي. د مثال په توګه، د څلور مثالونه.col-sm
به هر یو په اتوماتيک ډول د کوچني وقفې او پورته څخه 25٪ پراخه وي. د نورو مثالونو لپاره د اتوماتیک ترتیب کالم برخه وګورئ . - د کالم ټولګي د کالمونو شمیر په ګوته کوي چې تاسو غواړئ په هر قطار کې د ممکنه 12 څخه کار واخلئ. نو، که تاسو غواړئ درې مساوي پلن کالمونه په اوږدو کې، تاسو کولی شئ وکاروئ
.col-4
. - کالمونه
width
په فیصدو کې تنظیم شوي، نو دوی تل د دوی د اصلي عنصر په پرتله مایع او اندازه وي. - کالمونه افقي
padding
لري ترڅو د انفرادي کالمونو تر مینځ ګټرونه رامینځته کړي، په هرصورت، تاسو کولی شئmargin
د قطارونو څخه اوpadding
د کالمونو څخه.no-gutters
د.row
. - د گرډ د ځواب ویونکي کولو لپاره، پنځه د گرډ بریک پواینټ شتون لري، یو د هر ځواب ورکوونکي بریک پواینټ لپاره : ټول بریک پواینټ (اضافي کوچني)، کوچني، منځني، لوی، او اضافي لوی.
- د ګریډ بریک پواینټ د لږ تر لږه د میډیا پوښتنو پراساس دي، پدې معنی چې دوی په هغه یوه بریک پواینټ کې پلي کیږي او ټول هغه چې پورته دي (د بیلګې په توګه،
.col-sm-4
په کوچنیو، متوسطه، لوی، او اضافي لویو وسایلو باندې تطبیق کیږي، مګر لومړیxs
بریک پواینټ نه). - تاسو کولی شئ د لا زیاتو سیمانټیک مارک اپ لپاره د مخکینۍ تعریف شوي گرډ ټولګي (لکه
.col-4
) یا ساس مکسین وکاروئ .
د فلیکس باکس په شاوخوا کې د محدودیتونو او بګونو څخه خبر اوسئ ، لکه د فلیکس کانټینرونو په توګه د ځینې HTML عناصرو کارولو وړتیا نلري .
پداسې حال کې چې بوټسټریپ د ډیری اندازو تعریف کولو لپاره em
s یا s کاروي ، s د گرډ بریک پوائنټونو او کانټینر عرضونو لپاره کارول کیږي. دا ځکه چې د ویو پورټ عرض په پکسل کې دی او د فونټ اندازې سره نه بدلیږي .rem
px
وګورئ چې څنګه د بوټسټریپ گرډ سیسټم اړخونه د یو لاسي میز سره په ډیری وسیلو کې کار کوي.
اضافي کوچنی <576px |
کوچنی ≥576px |
منځنی ≥768px |
لوی ≥992px |
اضافي لوی ≥1200px |
|
---|---|---|---|---|---|
د کانټینر اعظمي عرض | هیڅ نه (آټو) | 540px | 720px | 960px | 1140px |
د ټولګي مخفف | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
د کالمونو # | 12 | ||||
د ګتر پلنوالی | 30px (د کالم په هر اړخ کې 15px) | ||||
نیستنی وړ | هو | ||||
د کالم ترتیب کول | هو |
د اسانه کالم اندازه کولو لپاره د بریک پوائنټ ځانګړي کالم ټولګي وکاروئ پرته له واضح شمیرې ټولګي لکه .col-sm-6
.
د مثال په توګه، دلته دوه ګریډ ترتیبونه دي چې په هر وسیله او ویوپورټ کې پلي کیږي، xs
له xl
. د هرې وقفې نقطې لپاره چې تاسو ورته اړتیا لرئ د واحد څخه کم ټولګیو شمیر اضافه کړئ او هر کالم به ورته عرض وي.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
د مساوي چوکۍ کالمونه په څو لینونو ویشل کیدی شي، مګر د سفاري فلیکس بکس بګ شتون درلود چې دا یې د واضح flex-basis
یا border
. د پخوانیو براوزر نسخو لپاره د حل لارې شتون لري، مګر دوی باید اړین نه وي که تاسو تازه یاست.
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
د فلیکس بکس گرډ کالمونو لپاره اتوماتیک ترتیب پدې معنی هم دی چې تاسو کولی شئ د یو کالم عرض وټاکئ او د وروڼو کالمونه په اوتومات ډول د هغې شاوخوا بیا اندازه کړئ. تاسو کولی شئ د مخکینۍ تعریف شوي گرډ ټولګي وکاروئ (لکه څنګه چې لاندې ښودل شوي)، د گرډ مکسین، یا انلاین عرضونه. په یاد ولرئ چې نور کالمونه به د مرکزي کالم د عرض په پام کې نیولو سره بیا اندازه شي.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
col-{breakpoint}-auto
د کالمونو اندازه کولو لپاره ټولګي د دوی د مینځپانګې طبیعي عرض پراساس وکاروئ .
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
د مساوي پلن کالمونه جوړ کړئ چې ډیری قطارونه پراخوي د هغه ځای په داخلولو سره .w-100
چې تاسو غواړئ کالمونه نوي کرښې ته مات کړئ. .w-100
د ځینې ځواب ویونکي ښودلو اسانتیاو سره په مخلوط کولو سره وقفې ځواب ورکوونکي کړئ .
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
د بوټسټریپ گرډ کې د پیچلي ځواب ورکوونکي ترتیبونو جوړولو لپاره د مخکینۍ تعریف شوي ټولګیو پنځه درجې شاملې دي. د خپلو کالمونو اندازه په اضافي کوچني ، کوچني ، متوسط ، لوی یا اضافي لوی وسیلو کې تنظیم کړئ که څه هم تاسو مناسب ګورئ.
د ګریډونو لپاره چې د کوچنیو وسیلو څخه تر لویو پورې ورته وي، د .col
او .col-*
ټولګیو څخه کار واخلئ. کله چې تاسو د ځانګړي اندازې کالم ته اړتیا لرئ یو شمیره ټولګي مشخص کړئ؛ که نه نو، د پاتې کیدو لپاره وړیا احساس وکړئ .col
.
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
د ټولګیو د یوې سیټ په کارولو سره .col-sm-*
، تاسو کولی شئ یو بنسټیز ګریډ سیسټم رامینځته کړئ چې د کوچني وقفې نقطې ( ) سره افقی کیدو دمخه د سټیک څخه پیل کیږي sm
.
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
ایا نه غواړئ چې ستاسو کالمونه په ساده ډول په ځینې گرډ ټایرونو کې ودرول شي؟ د اړتیا سره سم د هرې درجې لپاره د مختلف ټولګیو ترکیب وکاروئ. د ښه نظر لپاره لاندې مثال وګورئ چې دا ټول څنګه کار کوي.
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
د عمودی او افقی کالمونو د تنظیم کولو لپاره د فلیکس باکس الینمینټ اسانتیاوې وکاروئ.
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
زموږ د مخکینۍ تعریف شوي گرډ ټولګیو کې د کالمونو تر مینځ ګترونه د دې سره لرې کیدی شي .no-gutters
. دا د ټولو سمدستي ماشومانو کالمونو څخه منفي margin
s .row
او افقی لیرې کوي.padding
دلته د دې سټایلونو رامینځته کولو لپاره د سرچینې کوډ دی. په یاد ولرئ چې د کالم اوورایډونه یوازې د ماشومانو لومړني کالمونو ته محدود شوي او د ځانګړتیا ټاکونکي له لارې په نښه شوي . پداسې حال کې چې دا یو ډیر مشخص انتخاب کونکی رامینځته کوي ، د کالم پیډینګ لاهم د فاصلو اسانتیاو سره نور هم تنظیم کیدی شي .
د څنډې څخه تر څنډې ډیزاین ته اړتیا لرئ؟ مور او پلار پریږدئ .container
یا.container-fluid
په عمل کې، دلته دا څنګه ښکاري. په یاد ولرئ چې تاسو کولی شئ دا د نورو ټولو پخوانیو تعریف شوي گرډ ټولګیو سره کارولو ته دوام ورکړئ (پشمول د کالم پلنوالی، ځواب ویونکي درجې، بیا ترتیبونه، او نور).
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
که چیرې له 12 څخه ډیر کالمونه په یوه قطار کې ځای په ځای شي، د اضافي کالمونو هر ګروپ به، د یو واحد په توګه، په نوې کرښه کې وتړل شي.
د 9 + 4 = 13 > 12 راهیسې، دا 4-کالم پراخه div د یو متضاد واحد په توګه په نوې کرښه کې پوښل کیږي.
ورپسې کالمونه د نوې کرښې په اوږدو کې دوام لري.
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
په فلیکس باکس کې نوې لاین ته د کالمونو ماتول یو کوچني هیک ته اړتیا لري: یو عنصر اضافه کړئ width: 100%
چیرې چې تاسو غواړئ خپل کالمونه نوي لاین ته لپ کړئ. عموما دا د څو .row
s سره سرته رسیږي، مګر د پلي کولو هره طریقه نشي کولی د دې حساب وکړي.
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
تاسو کولی شئ دا وقفه زموږ د غبرګون ښودلو اسانتیاو سره په ځانګړو وقفو ځایونو کې هم پلي کړئ .
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
ستاسو د مینځپانګې بصري ترتیب.order-
کنټرول لپاره ټولګي وکاروئ . دا ټولګي ځواب ورکوونکي دي، نو تاسو کولی شئ د وقفې نقطې لخوا ترتیب کړئ (د بیلګې په توګه، ). د ټولو پنځو ګریډ سطحو لپاره ملاتړ شامل دی .order
.order-1.order-md-2
1
12
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
.order-first
ځواب ورکوونکي او .order-last
ټولګي هم شتون لري چې په ترتیب سره د پلي کولو او ( ) په order
واسطه یو عنصر بدلوي. دا ټولګي هم د اړتیا سره سم د شمیرل شوي ټولګیو سره یوځای کیدی شي.order: -1
order: 13
order: $columns + 1
.order-*
<div class="container">
<div class="row">
<div class="col order-last">
First, but last
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>
تاسو کولی شئ د ګریډ کالمونه په دوه لارو تنظیم کړئ: زموږ د ځواب ویونکي .offset-
گرډ ټولګي او زموږ د حاشیې اسانتیاوې . د ګریډ ټولګي د کالمونو سره د سمون لپاره اندازه کیږي پداسې حال کې چې حاشیې د ګړندي ترتیبونو لپاره خورا ګټور دي چیرې چې د آفسیټ عرض متغیر وي.
.offset-md-*
کالمونه د ټولګیو په کارولو سره ښي خوا ته حرکت وکړئ . دا ټولګي د کالم په واسطه د کالم کیڼ اړخ ته وده ورکوي *
. د مثال په توګه، په څلورو کالمونو کې .offset-md-4
حرکت کوي ..col-md-4
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
په ځواب ویونکي وقفو کې د کالم پاکولو سربیره، تاسو ممکن د آفسیټونو بیا تنظیم کولو ته اړتیا ولرئ. دا د گرډ مثال کې په عمل کې وګورئ .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
په v4 کې فلیکس باکس ته د تګ سره، تاسو کولی شئ د حاشیې اسانتیاوې وکاروئ لکه .mr-auto
د ورور کالمونه له یو بل څخه لرې کړئ.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
د ډیفالټ گرډ سره ستاسو مینځپانګې د ځړولو لپاره ، په موجوده کالم کې .row
د کالمونو نوی او سیټ اضافه کړئ . په نیست شوي قطارونو کې باید د کالمونو سیټ شامل وي چې تر 12 یا لږو پورې اضافه کوي (دا اړینه نده چې تاسو ټول 12 موجود کالمونه وکاروئ)..col-sm-*
.col-sm-*
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
کله چې د بوټسټریپ سرچینې ساس فایلونه وکاروئ ، تاسو د دودیز ، سیمانټیک ، او ځواب ویونکي پاڼې ترتیبونو رامینځته کولو لپاره د Sass متغیرونو او مکسینونو کارولو اختیار لرئ. زموږ مخکینۍ تعریف شوي ګریډ ټولګي د ګړندي ځواب ویونکي ترتیبونو لپاره د کارولو لپاره چمتو ټولګیو بشپړ سویټ چمتو کولو لپاره ورته متغیرونه او مکسینونه کاروي.
متغیرات او نقشې د کالمونو شمیر، د ګټر پلنوالی، او د میډیا د پوښتنې نقطه ټاکي چې په کوم ځای کې د تیر کالم پیل کول. موږ دا د پورته مستند شوي دمخه تعریف شوي گرډ ټولګیو رامینځته کولو لپاره کاروو ، په بیله بیا د لاندې لیست شوي دودیز مکسینونو لپاره.
مکسین د ګریډ متغیرونو سره په ګډه کارول کیږي ترڅو د انفرادي گرډ کالمونو لپاره سیمانټیک سی ایس ایس رامینځته کړي.
تاسو کولی شئ متغیرونه خپل دودیز ارزښتونو ته بدل کړئ، یا یوازې د دوی د ډیفالټ ارزښتونو سره مکسین وکاروئ. دلته د دوه کالم ترتیب رامینځته کولو لپاره د ډیفالټ تنظیماتو کارولو مثال دی چې تر مینځ واټن لري.
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
زموږ د جوړ شوي گرډ Sass متغیرونو او نقشو په کارولو سره ، دا ممکنه ده چې د مخکیني تعریف شوي گرډ ټولګي په بشپړ ډول تنظیم کړئ. د درجو شمیر، د رسنیو د پوښتنو ابعاد، او د کانټینر پلنوالی بدل کړئ - بیا بیا کمپایل کړئ.
د گرډ کالمونو شمیر د Sass متغیرونو له لارې تعدیل کیدی شي. $grid-columns
د هر انفرادي کالم د عرض (سلنه کې) د تولید لپاره کارول کیږي پداسې حال کې $grid-gutter-width
چې د وقفې نقطې ځانګړي عرض ته اجازه ورکوي چې په مساوي ډول ویشل شوي padding-left
او padding-right
د کالم ګټرونو لپاره.
پخپله د کالمونو هاخوا حرکت کول ، تاسو ممکن د گرډ ټایرونو شمیر هم تنظیم کړئ. که تاسو یوازې څلور ګریډ ټایرونه غواړئ، نو تاسو به د دې په څیر یو څه تازه $grid-breakpoints
کړئ $container-max-widths
:
کله چې د Sass متغیرونو یا نقشو کې کوم بدلونونه رامینځته کړئ، تاسو به اړتیا ولرئ خپل بدلونونه خوندي کړئ او بیا تالیف کړئ. دا کار کول به د کالم پلنوالی، آفسیټونو، او ترتیب کولو لپاره د مخکینۍ تعریف شوي گرډ ټولګیو یو نوی سیټ تولید کړي. د ځواب ویونکي لید اسانتیاوې به د دودیز وقفې نقطو کارولو لپاره هم نوي شي. ډاډ ترلاسه کړئ چې د گرډ ارزښتونه په px
(نه rem
، em
یا %
) کې تنظیم کړئ.