ਰੈਸਪਾਂਸਿਵ ਵੈੱਬਸਾਈਟ ਡਿਜਾਈਨ - ਗ੍ਰਿੱਡ ਦਿਸ਼ਾ

ਗ੍ਰਿੱਡ ਦਿਸ਼ਾ ਕੀ ਹੈ?

ਕਈ ਵੈੱਬਸਾਈਟਾਂ ਗ੍ਰਿੱਡ ਦਿਸ਼ਾ (grid-view) 'ਤੇ ਅਧਾਰਤ ਹਨ ਮਤਲਬ ਪੰਨਾ ਕਈ ਸਤੰਭਾਂ ਵਿੱਚ ਵੰਡਿਆ ਹੋਇਆ ਹੈ:

ਵੈੱਬਸਾਈਟ ਦੇ ਡਿਜਾਈਨ ਵਿੱਚ ਗ੍ਰਿੱਡ ਦਿਸ਼ਾ ਵਰਤਣਾ ਬਹੁਤ ਮਦਦਗਾਰ ਹੁੰਦਾ ਹੈ। ਇਸ ਨਾਲ ਪੰਨੇ 'ਤੇ ਐਲੀਮੈਂਟ ਲਗਾਉਣਾ ਹੋਰ ਅਸਾਨ ਹੁੰਦਾ ਹੈ。

ਰੈਸਪਾਂਸਿਵ ਗ੍ਰਿੱਡ ਦਿਸ਼ਾ ਆਮ ਤੌਰ 'ਤੇ 12 ਸਤੰਭ ਰੱਖਦੀ ਹੈ ਅਤੇ ਕੁੱਲ ਚੌਡਾਈ 100% ਹੁੰਦੀ ਹੈ ਅਤੇ ਬਰਾਉਜ਼ਰ ਵਿੰਡੋ ਦੇ ਮੋਡੀਫਾਈ ਹੋਣ 'ਤੇ ਸਮਝਦਾਰੀ ਕਰਦੀ ਹੈ ਅਤੇ ਫੈਲਦੀ ਹੈ

ਰੈਸਪਾਂਸਿਵ ਗ੍ਰਿੱਡ ਦਿਸ਼ਾ ਬਣਾਉਣ

ਸਾਡੇ ਦੇਖਣਾ ਸ਼ੁਰੂ ਕਰੀਏ ਰੈਸਪਾਂਸਿਵ ਗ੍ਰਿੱਡ ਦਿਸ਼ਾ ਬਣਾਉਣ

ਪਹਿਲਾਂ ਸਾਰੇ HTML ਐਲੀਮੈਂਟਾਂ ਦੀ ਚੇਕ ਕਰੋ box-sizing ਪ੍ਰਤੀਯੋਗਿਤਾ ਸੈਟ ਕੀਤੀ ਗਈ ਹੈ border-boxਇਸ ਤਰ੍ਹਾਂ ਯੋਗ ਹੋਵੇਗਾ ਕਿ ਮੰਡਰਨ ਦੀ ਕੁੱਲ ਚੌਡਾਈ ਅਤੇ ਹਾਈਟ ਵਿੱਚ ਪੂਰਵ-ਸਿਧਾਂਤਕ ਖਾਲੀ ਜਗ੍ਹਾ (ਫੁੱਲਬਕਸ) ਅਤੇ ਬਾਰਡਰ ਸ਼ਾਮਿਲ ਹੋਣ。

CSS ਵਿੱਚ ਹੇਠ ਲਿਖੇ ਕੋਡ ਜੋੜੋ:

* {
  box-sizing: border-box;
}

ਸਾਡੇ CSS ب克斯ائزنگ box-sizing ਪ੍ਰਤੀਯੋਗਿਤਾ ਬਾਰੇ ਹੋਰ ਸਮਝਣ ਲਈ ਇੱਕ ਚਾਪ ਪੜ੍ਹੋ。

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਇੱਕ ਸਰਲ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਵੈੱਬਸਾਈਟ ਦਿਸ਼ਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤੀ ਗਈ ਹੈ ਜਿਸ ਵਿੱਚ ਦੋ ਸਤੰਭ:

25%
75%

ਉਦਾਹਰਣ

.menu {
  width: 25%;
  float: left;
}
.main {
  width: 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;
}

آپ خود کا کچھ کریں

توجیہ، جب آپ کا بروسر کا ویندوز کو کافی چھوٹا بنادیتا ہے تو مثال میں ویب پیج کا نظر نیا نہیں چلتا۔ اگلے فصل میں آپ کو اس مسئلے کو حل کرنے کا بارے میں سیکھنا ہوگا۔