M

MLOG

தமிழ்

CSS பயன்படுத்தி பார்வைக்கு ஈர்க்கும் மேசன்ரி லேஅவுட்களை உருவாக்குவதைக் கற்றுக்கொள்ளுங்கள். படங்கள், கட்டுரைகள் போன்ற பலதரப்பட்ட உள்ளடக்கத்தைக் காண்பித்து, உலகளவில் பயனர் அனுபவத்தை மேம்படுத்த இது சிறந்தது.

CSS மேசன்ரி லேஅவுட்: Pinterest-பாணி கிரிட் அமைப்புகளை உருவாக்குதல்

வலை வடிவமை உலகில், காட்சிப்படுத்தல் மிகவும் முக்கியமானது. வலைத்தளங்கள் ஈர்க்கக்கூடியதாகவும், டைனமிக்காகவும், எளிதில் செல்லக்கூடியதாகவும் இருக்க வேண்டும். இதை அடைய உதவும் ஒரு சக்திவாய்ந்த நுட்பம் CSS மேசன்ரி லேஅவுட் ஆகும், இது Pinterest போன்ற தளங்களால் பிரபலப்படுத்தப்பட்ட ஒரு வடிவமைப்பு முறை. இந்த கட்டுரை மேசன்ரி லேஅவுட்களைப் புரிந்துகொண்டு செயல்படுத்துவதற்கான ஒரு விரிவான வழிகாட்டியை வழங்குகிறது, உலகளாவிய பார்வையாளர்களுக்காக பிரமிக்க வைக்கும் மற்றும் பயனர் நட்பு வலை அனுபவங்களை உருவாக்க உங்களுக்கு இது உதவுகிறது.

CSS மேசன்ரி லேஅவுட் என்றால் என்ன?

ஒரு மேசன்ரி லேஅவுட், "Pinterest-பாணி" லேஅவுட் என்றும் அழைக்கப்படுகிறது, இது ஒரு கிரிட்-அடிப்படையிலான வடிவமைப்பு ஆகும், இதில் கூறுகள் நெடுவரிசைகளில் அமைக்கப்பட்டிருக்கும், ஆனால் மாறுபட்ட உயரங்களுடன் இருக்கும். அனைத்து கூறுகளும் சரியாக வரிசைப்படுத்தப்படும் ஒரு நிலையான கிரிட்டைப் போலல்லாமல், மேசன்ரி லேஅவுட் கூறுகளை அவற்றின் தனிப்பட்ட உயரங்களின் அடிப்படையில் அடுக்க அனுமதிக்கிறது, இது பார்வைக்கு ஈர்க்கும் மற்றும் டைனமிக் விளைவை உருவாக்குகிறது. இது வெவ்வேறு விகிதங்களைக் கொண்ட படங்கள் அல்லது வெவ்வேறு நீளங்களைக் கொண்ட கட்டுரைகள் போன்ற பல்வேறு அளவுகளில் உள்ள உள்ளடக்கத்தை ஒரு ஒழுங்கமைக்கப்பட்ட மற்றும் பார்வைக்கு ஈர்க்கும் முறையில் காண்பிக்க அனுமதிக்கிறது. இதன் விளைவாக, வெவ்வேறு திரை அளவுகள் மற்றும் உள்ளடக்க மாறுபாடுகளுக்கு ஏற்ப தடையின்றி பொருந்தக்கூடிய ஒரு லேஅவுட் கிடைக்கிறது, இது பலதரப்பட்ட உள்ளடக்கத்தைக் காண்பிக்க ஏற்றதாக அமைகிறது.

மேசன்ரி லேஅவுட்டை ஏன் பயன்படுத்த வேண்டும்? நன்மைகள் மற்றும் பயன்கள்

மேசன்ரி லேஅவுட்கள் வலை உருவாக்குநர்கள் மற்றும் வடிவமைப்பாளர்களுக்கு பல கட்டாய நன்மைகளை வழங்குகின்றன, இது பல்வேறு வலைப் பயன்பாடுகளுக்கு ஒரு பிரபலமான தேர்வாக அமைகிறது. அதன் சில முக்கிய நன்மைகள் இங்கே:

மேசன்ரி லேஅவுட்களை செயல்படுத்துதல்: நுட்பங்கள் மற்றும் அணுகுமுறைகள்

உங்கள் வலைத் திட்டங்களில் மேசன்ரி லேஅவுட்களைச் செயல்படுத்த பல அணுகுமுறைகள் உள்ளன. உகந்த முறை உங்கள் குறிப்பிட்ட தேவைகள் மற்றும் உங்கள் திட்டத்தின் சிக்கலைப் பொறுத்தது. கீழே, பிரபலமான நுட்பங்களை ஆராய்வோம்:

1. CSS கிரிட் பயன்படுத்துதல்

CSS கிரிட் ஒரு சக்திவாய்ந்த மற்றும் நவீன லேஅவுட் அமைப்பு ஆகும், இது மேசன்ரி போன்ற லேஅவுட்களை உருவாக்கப் பயன்படுத்தப்படலாம். CSS கிரிட் முதன்மையாக இரு பரிமாண லேஅவுட்களுக்காக வடிவமைக்கப்பட்டிருந்தாலும், கவனமான உள்ளமைப்பைப் பயன்படுத்தி நீங்கள் ஒரு மேசன்ரி விளைவை அடையலாம். இந்த அணுகுமுறைக்கு உண்மையான மேசன்ரி உணர்வைப் பெற ஜாவாஸ்கிரிப்ட் பயன்படுத்தி கூறுகளின் நிலைகளை டைனமிக்காக கணக்கிட வேண்டியிருக்கும். CSS கிரிட் லேஅவுட்டின் மீது உயர் மட்ட கட்டுப்பாட்டை வழங்குகிறது மற்றும் சிக்கலான வடிவமைப்புகளுக்கு திறமையானது.

எடுத்துக்காட்டு (அடிப்படை விளக்கம் - முழுமையான மேசன்ரி விளைவுக்கு ஜாவாஸ்கிரிப்ட் தேவை):


 .grid-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
 grid-gap: 20px; /* Spacing between items */
 }

 .grid-item {
 /*  Styling for grid items */
 }

விளக்கம்:

குறிப்பு: இந்த எடுத்துக்காட்டு ஒரு கிரிட் லேஅவுட்டிற்கான அடிப்படை கட்டமைப்பை வழங்குகிறது. உண்மையான மேசன்ரி விளைவை அடைவதற்கு பொதுவாக ஜாவாஸ்கிரிப்ட் கொண்டு கூறுகளின் நிலை, குறிப்பாக உயர வேறுபாடுகளைக் கையாள வேண்டும். ஜாவாஸ்கிரிப்ட் இல்லாமல், இது ஒரு சாதாரண கிரிட்டாக இருக்கும்.

2. CSS காலம்ஸ் பயன்படுத்துதல்

CSS காலம்ஸ் பல நெடுவரிசை லேஅவுட்டை உருவாக்குவதற்கான ஒரு எளிய அணுகுமுறையை வழங்குகிறது. இது ஒரு சரியான மேசன்ரி தீர்வாக இல்லாவிட்டாலும், உண்மையான மேசன்ரி நடத்தைக்கு குறைவான தேவையுள்ள எளிய லேஅவுட்களுக்கு CSS காலம்ஸ் ஒரு நல்ல தேர்வாக இருக்கும். `column-count`, `column-width` மற்றும் `column-gap` பண்புகள் நெடுவரிசைகளைக் கட்டுப்படுத்துகின்றன.

எடுத்துக்காட்டு:


 .masonry-container {
 column-count: 3; /* Number of columns */
 column-gap: 20px; /* Spacing between columns */
 }

 .masonry-item {
 /* Styling for items */
 margin-bottom: 20px; /* Optional spacing */
 }

விளக்கம்:

வரம்புகள்:

3. ஜாவாஸ்கிரிப்ட் லைப்ரரிகள் மற்றும் பிளகின்களைப் பயன்படுத்துதல்

உண்மையான மேசன்ரி லேஅவுட்களைச் செயல்படுத்த ஜாவாஸ்கிரிப்ட் லைப்ரரிகள் மற்றும் பிளகின்கள் மிகவும் பொதுவான மற்றும் நேரடியான வழியாகும். இந்த லைப்ரரிகள் டைனமிக் விளைவை உருவாக்கத் தேவையான சிக்கலான கணக்கீடுகள் மற்றும் கூறுகளின் நிலைப்படுத்தலைக் கையாளுகின்றன. இங்கே சில பிரபலமான விருப்பங்கள் உள்ளன:

எடுத்துக்காட்டு (Masonry.js ஐப் பயன்படுத்துதல் - பொதுவான கட்டமைப்பு):

  1. லைப்ரரியைச் சேர்க்கவும்: உங்கள் HTML கோப்பில் Masonry.js ஸ்கிரிப்டைச் சேர்க்கவும், பொதுவாக மூடும் </body> குறிச்சொல்லுக்கு சற்று முன்பு. 
    
 <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  2. HTML கட்டமைப்பு: ஒரு கண்டெய்னர் கூறு மற்றும் தனிப்பட்ட உருப்படி கூறுகளை உருவாக்கவும். 
    
 <div class="grid-container">
  <div class="grid-item"><img src="image1.jpg"></div>
  <div class="grid-item"><img src="image2.jpg"></div>
  <div class="grid-item"><img src="image3.jpg"></div>
  <!-- More items -->
 </div>
  3. CSS ஸ்டைலிங்: உங்கள் கிரிட் கண்டெய்னர் மற்றும் உருப்படிகளுக்கு ஸ்டைல் செய்யவும். 
    
 .grid-container {
  width: 100%; /* Or a specific width */
 }

 .grid-item {
  width: 30%; /* Example width */
  margin-bottom: 20px; /* Spacing between items */
  float: left; /* Or other positioning methods */
 }

 .grid-item img { /* or your image styling */
 width: 100%; /* Make images responsive to their containers */
 height: auto;
 }
  4. ஜாவாஸ்கிரிப்ட் தொடங்குதல்: ஜாவாஸ்கிரிப்ட் பயன்படுத்தி Masonry.js-ஐத் தொடங்கவும். இந்த குறியீடு பொதுவாக ஒரு ஸ்கிரிப்ட் குறிச்சொல்லுக்குள் செல்லும். 
    
 // Initialize Masonry after the DOM is loaded.
 document.addEventListener('DOMContentLoaded', function() {
  var grid = document.querySelector('.grid-container');
  var msnry = new Masonry( grid, {
   itemSelector: '.grid-item',
   columnWidth: '.grid-item',
   gutter: 20
  });
 });

விளக்கம் (ஜாவாஸ்கிரிப்ட்):

லைப்ரரிகள்/பிளகின்களின் நன்மைகள்:

மேசன்ரி லேஅவுட் செயல்படுத்தலுக்கான சிறந்த நடைமுறைகள்

திறமையான மற்றும் பார்வைக்கு ஈர்க்கும் மேசன்ரி லேஅவுட்களை உருவாக்க, பின்வரும் சிறந்த நடைமுறைகளைக் கருத்தில் கொள்ளுங்கள்:

உலகளாவிய எடுத்துக்காட்டுகள் மற்றும் பயன்பாடுகள்

மேசன்ரி லேஅவுட்கள் உலகளவில் பல்வேறு வலைத்தளங்கள் மற்றும் பயன்பாடுகளில் பயன்படுத்தப்படுகின்றன. இங்கே சில எடுத்துக்காட்டுகள்:

முடிவுரை: மேசன்ரியின் சக்தியைத் தழுவுங்கள்

CSS மேசன்ரி லேஅவுட்கள் பார்வைக்கு பிரமிக்க வைக்கும் மற்றும் பயனர் நட்பு வலை அனுபவங்களை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். இந்தக் கட்டுரையில் கோடிட்டுக் காட்டப்பட்டுள்ள கொள்கைகள், நுட்பங்கள் மற்றும் சிறந்த நடைமுறைகளைப் புரிந்துகொள்வதன் மூலம், பலதரப்பட்ட உள்ளடக்கத்தைக் காண்பிக்க, பயனர் ஈடுபாட்டை மேம்படுத்த மற்றும் போட்டி டிஜிட்டல் நிலப்பரப்பில் தனித்து நிற்கும் வலைத்தளங்களை உருவாக்க மேசன்ரி லேஅவுட்களை நீங்கள் திறமையாகச் செயல்படுத்தலாம். படத் தொகுப்புகள் முதல் தயாரிப்பு பட்டியல்கள் வரை, மேசன்ரி லேஅவுட்டின் பயன்பாடுகள் பரவலானவை மற்றும் மிகவும் பயனுள்ளவை. மேசன்ரியின் சக்தியைத் தழுவி, உலகளாவிய பார்வையாளர்களுக்காக உங்கள் வலைத்தளங்களின் காட்சி ஈர்ப்பு மற்றும் பயன்பாட்டினை உயர்த்துங்கள்.

கூடுதல் ஆதாரங்கள்