రెస్పాన్సివ్ వెబ్ డిజైన్ - గ్రిడ్ వీక్షణ

గ్రిడ్ వీక్షణం ఏమిటి?

అనేక వెబ్ పేజీలు గ్రిడ్ వీక్షణ (grid-view) పైన ఆధారపడి ఉన్నాయి, ఇది అర్థం వెబ్ పేజీ కొన్ని నిలువలుగా విభజించబడింది:

వెబ్ పేజీ నిర్మాణంలో, గ్రిడ్ వీక్షణను ఉపయోగించడం చాలా మంచిది. ఇది పేజీలో ఎలిమెంట్స్ ను చాలా సులభంగా స్థానాలు చేయడానికి సహాయపడుతుంది.

రెస్పాన్సివ్ గ్రిడ్ వీక్షణలు సాధారణంగా 12 నిలువలు కలిగి ఉంటాయి, మొత్తం వెడల్పు 100% ఉంటుంది మరియు బ్రౌజర్ విండో వెడల్పు మార్చడం ప్రయోగంలో కుదించి విస్తరిస్తాయి.

రెస్పాన్సివ్ గ్రిడ్ వీక్షణను నిర్మించండి

మాకు రెస్పాన్సివ్ గ్రిడ్ వీక్షణను నిర్మించండి మొదలు పెట్టండి.

మొదటగా, అన్ని హెచ్ఎంఎల్ ఎలిమెంట్స్ యొక్క box-sizing అట్రిబ్యూట్ సెట్ చేయబడింది: border-boxదీని ద్వారా పూర్తి వెడల్పు మరియు పెద్దత లో అంతరాంతరాలు (పాదరుపు) మరియు బార్డర్లు ఉన్నాయి.

CSS లో ఈ కోడ్ని జోడించండి:

* {
  box-sizing: border-box;
}

మా CSS బాక్స్ సైజింగ్ బాక్స్-సైజింగ్ అట్రిబ్యూట్ గురించి మరింత వివరాలను ఈ చివరిలో చదవండి.

ఈ ఉదాహరణ ఒక సాధారణ రెస్పాన్సివ్ వెబ్ పేజీని ప్రదర్శిస్తుంది, దీనిలో రెండు నిలువలు ఉన్నాయి:

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;
}

亲自试一试

మీరు బ్రౌజర్ విండోను చాలా చిన్న వెడల్పుగా మార్చినప్పుడు, ఉదాహరణలు లోని వెబ్ పేజీ అనుకూలంగా చూడబడదు. తదుపరి చిప్పులో, ఈ సమస్యను ఎలా పరిష్కరించాలో తెలుసుకోండి.