CSS 12-நெடுவரிசை கிரிட் லேஅவுட்
12-நெடுவரிசை கிரிட் என்பது வலைப்பக்க உள்ளடக்கத்தை கட்டமைப்பதற்கான பொதுவான மற்றும் நெகிழ்வான முறையாகும், குறிப்பாக பதிலளிக்கும் வலை வடிவமைப்பிற்கு.
12-நெடுவரிசை கிரிட் அமைப்பு கிடைக்கும் கிடைமட்ட இடத்தை 12 சம அகல நெடுவரிசைகளாகப் பிரிக்கிறது, இது லேஅவுட்டுக்குள் உறுப்புகளை துல்லியமாக வைப்பதற்கும் அளவிடுவதற்கும் அனுமதிக்கிறது.
12-நெடுவரிசை கிரிட்டின் நன்மைகள்
நெகிழ்வுத்தன்மை: எண் 12 அதிகமாகப் பிரிக்கக்கூடியது. வடிவமைப்பாளர்கள் பாதி, மூன்றில் ஒரு பங்கு, மற்றும் கால் பகுதிகளுடன் வடிவமைப்புகளை எளிதாக உருவாக்கலாம் (6 இன் 2 நெடுவரிசைகள், 4 இன் 3 நெடுவரிசைகள், 3 இன் 4 நெடுவரிசைகள்).
பதிலளிப்புத்தன்மை: 12-நெடுவரிசை கிரிட் வெவ்வேறு திரை அளவுகளுக்கு (டெஸ்க்டாப், டேப்லெட் அல்லது மொபைல்) பொருந்தக்கூடிய பதிலளிக்கும் வலைத்தளங்களை உருவாக்க உகந்ததாகும். இது அனைத்து தளங்களிலும் ஒரே மாதிரியான பயனர் அனுபவத்தை வழங்குகிறது.
திறமை: முன்கூட்டியே வரையறுக்கப்பட்ட கட்டமைப்பைக் கொண்டிருப்பது வடிவமைப்பு செயல்முறையை விரைவுபடுத்துகிறது.
அடிப்படை 12-நெடுவரிசை CSS கிரிட் லேஅவுட்டை உருவாக்குவது எப்படி
கிரிட் கொண்டெய்னரை வரையறுக்கவும்
கிரிட் கொண்டெய்னருக்கு display: grid; பயன்படுத்தவும்.
12 நெடுவரிசைகளை உருவாக்கவும்
12 நெடுவரிசைகளை வரையறுக்க grid-template-columns பண்பைப் பயன்படுத்தவும்.
repeat(12, [col-start] 1fr); என்பது சம அகலம் கொண்ட 12-நெடுவரிசை கிரிட்டை உருவாக்குகிறது, மேலும் ஒவ்வொரு நெடுவரிசை ட்ராக்கின் தொடக்கக் கோட்டிற்கு col-start என்று பெயரிடுகிறது.
.container {
display: grid;
grid-template-columns: repeat(12, [col-start] 1fr);
}repeat(12,..): பின்வரும் ட்ராக் வரையறையை 12 முறை மீண்டும் செய்ய கிரிட்டிற்கு கூறுகிறது, இதன் விளைவாக 12 நெடுவரிசைகள் கிடைக்கும்.
[col-start]: இது பெயரிடப்பட்ட கிரிட் கோட்டை உருவாக்குகிறது. இது 12 முறை மீண்டும் செய்யப்படுவதால், col-start என்று பெயரிடப்பட்ட 12 கோடுகள் உங்களுக்கு கிடைக்கும். கிரிட்டில் குறிப்பிட்ட தொடக்க புள்ளிகளில் கிரிட் உருப்படிகளை வைக்க இது பயனுள்ளதாக இருக்கும்.
1fr: கிரிட் கொண்டெய்னரில் உள்ள மொத்த கிடைக்கும் இடத்தின் ஒரு பின்னத்தைக் குறிக்கும் ஒரு பின்ன அலகு. 1fr ஐப் பயன்படுத்துவதன் மூலம், 12 நெடுவரிசைகள் ஒவ்வொன்றும் சமமான, திரவ அகலமாக இருக்கும்.
கிரிட் உருப்படிகளை வைக்கவும்
கிரிட் உருப்படிகளை grid-column பயன்படுத்தி இந்த 12 நெடுவரிசைகளில் வைக்கலாம் மற்றும் அளவிடலாம்.
ஒரு கிரிட் உருப்படி குறிப்பிட்ட எண்ணிக்கையிலான நெடுவரிசைகளை விரியட்டும், grid-column: span <number>; அல்லது grid-column: <start-line> / span <number>; பயன்படுத்தவும்.
ஒரு உருப்படிக்கான தொடக்க மற்றும் முடிவு கிரிட் கோடுகளை grid-column: <start-line> / <end-line>; பயன்படுத்தி வரையறுக்கலாம்.
பிரேக்பாயிண்டுகளைச் சேர்க்க மீடியாகுவரிகளைப் பயன்படுத்தவும்
எப்போதும் மொபைல் முதலில் வடிவமைக்கவும்: 576 பிக்சல்களுக்கும் குறைவான அகலம் கொண்ட திரைகளுக்கு மூல வரிசையில் (மேலிருந்து கீழாக) பிரிவுகளைக் காட்டுகிறோம்.
பின்னர், 576 மற்றும் 767 பிக்சல்களுக்கு இடையே உள்ள திரைகளுக்கு இரண்டு-நெடுவரிசை லேஅவுட்டிற்குச் செல்கிறோம்.
பின்னர், 767 பிக்சல்களுக்கு மேல் உள்ள திரைகளுக்கு மூன்று-நெடுவரிசை லேஅவுட்டிற்குச் செல்கிறோம்.
எடுத்துக்காட்டு
12-நெடுவரிசை கிரிட் லேஅவுட்டின் முழுமையான எடுத்துக்காட்டு:
* {
box-sizing: border-box;
}
.container {
display: grid;
grid-template-columns: repeat(12, [col-start] 1fr);
gap: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Mobile first */
.container > * {
border: 1px solid green;
background-color: beige;
padding: 10px;
grid-column: col-start / span 12;
}
@media (min-width: 576px) {
.sidebar {
grid-column: col-start / span 3;
grid-row: 3;
}
.ads {
grid-column: col-start / span 3;
}
.content, .footer {
grid-column: col-start 4 / span 9;
}
nav ul {
display: flex;
justify-content: space-between;
}
}
@media (min-width: 768px) {
.nav {
grid-column: col-start / span 2;
grid-row: 2 / 4;
}
.content {
grid-column: col-start 3 / span 8;
grid-row: 2 / 4;
}
.sidebar {
grid-column: col-start 11 / span 2;
}
.ads {
grid-column: col-start 11 / span 2;
}
.footer {
grid-column: col-start / span 12;
}
nav ul {
flex-direction: column;
}
}CSS 12-நெடுவரிசை கிரிட் பயிற்சி
12-நெடுவரிசை கிரிட் லேஅவுட் பற்றிய உங்கள் அறிவை இந்தப் பயிற்சி சோதிக்கும்: