سیستم grid فریمورک semantic

در این مطلب فریم ورک سمانتیک رو به صورت مختصر معرفی کردیم

Grid

اما حالا می خواهیم نگاهی به سیستم grid این فریمورک بیندازیم . که به شما قابلیت کادربندی مناسب صفحات را می دهد . برخلاف bootstrap که فضا را به 12 قسمت تقسیم می کند semantic ui  فضا را به 16 قسمت تقسیم می کند در ادامه از یک مثال ساده استفاده می کنیم

<div class="ui grid" >

  <div class="four wide column" >

  </div>

  <div class="ten wide column" >

  </div>

  <div class="two wide column" >

  </div>

</div>

در مثال بالا ما سه div تعریف کردیم که div اول ما 4 واحد از 16 واحد و div دوم ده واحد از فضا را به خود اختصاص داده است

یک روش دیگر برای این کار

<div class="ui three column grid" >

  <div class="column" >1<div>
  <div class="column" >2<div>
  <div class="column" >3<div>

</div>

در این روش می توانید صفحه را به سه قسمت مساوی تقسیم کنیم .

توجه کنید که در این مثال ها ما به هر div یک background اختصاص دادیم که بهتر بتوانید عملکرد کد ها را ببینید

در طراحی ساخت سایت شما باید صفحات سایت را ریسپانسیو ( واکنشگرا ) بسازید تا هم در مبایل و یا در مانیتور ها با سایز های مختلف به درستی نمایش داده شوند فریمورک semantic هم کلاس های مختلفی را برای این منظور در نظر گرفته است به نمونه کد زیر توجه کنید

<div class="ui centered grid">
  <div class="computer only row">
    <div class="column"></div>
  </div>
  <div class="six wide tablet eight wide computer column"></div>
  <div class="six wide tablet eight wide computer column"></div>
  <div class="six wide tablet eight wide computer column"></div>
</div>

در نمونه کد بالا کار کلاس computer only آن هست که این div فقط در صفحات کامپیوتر و نمایشگر های بزرگتر نشان داده شود و در نمایش گر های کوچکتر hide می شود 

اما در کلاس های six wide tablet تعیین می کنیم که div ما در صفحه نمایش های دستگاه هایی مثل تبلت و مبایل 6 واحد و در صفحه نمایش های بزرگتر 8 واحد اشغال کنن به این صورت انعطاف بیشتری در ریسپانسیو کردن داریم

کلاس centered هم همان طور که از اسم آن مشخص است div های ما را در مرکز صفحه قرار می دهد 

اما یکی دیگر از کلاس های پرکاربرد کلاس stackable است اگر بخواهیم کاربرد این کلاس را به زبان ساده بیان کنیم در گوشی ها و تبلت ها و یا زمان که صفحه مرورگر خود را کوچک می کنیم این کلاس باعث می شود div های ما از حالت افقی به حالت لیست عمودی تغییر کنند تا سایت برای صفحه نمایش های کوچک مناسب تر شود

<div class="ui stackable four column grid">
  <div class="column"></div>
  <div class="column"></div>
</div>