פריסת רשת CSS כיצד להשתמש minmax ()

ה מודול פריסת רשת לוקח עיצוב תגובה לשלב הבא על ידי הצגת סוג חדש של גמישות זה מעולם לא ראיתי. עכשיו, אנחנו לא יכולים רק להגדיר רשתות מותאמות אישית - - blazingly מהיר אך ורק עם CSS טהור, אבל רשת CSS יש גם פנינים נסתרות רבות המאפשרים לנו להמשיך לצבוט את הרשת ולהשיג פריסות מסובכות.

ה מינימום מקסימום() פונקציה הוא אחד המאפיינים האלה פחות ידועים. זה מאפשר להגדיר את גודל מסלול הרשת כמו מינימום טווח מקסימלי כך הרשת יכולה להתאים את המראה של כל משתמש בצורה הטובה ביותר האפשרית.

תחביר

התחביר של מינימום מקסימום() פונקציה פשוטה יחסית, זה לוקח שני טיעונים: מינימום וערך מרבי:

 minmax (דקות, מקסימום) 

ה דקות ערך צריך להיות קטן יותר מאשר מקסימום, אחרת מקסימום מתעלמת מהדפדפן.

אנחנו יכולים להשתמש מינימום מקסימום() פונקציה הערך של רשת-תבנית-עמודות או רשת-תבנית שורות רכוש (או שניהם). בדוגמה שלנו, נשתמש הראשונה, כמו שזה מקרה השימוש הרבה יותר תכופים.

 .מכולה display: grid; רשת תבנית עמודות: minmax (100px, 200px) 1fr 1fr; רשת-שורות-שורות: 100px 100px 100px; grid-gap: 10px;  

בהדגמה Codepen להלן, אתה יכול למצוא את HTML ו- CSS קוד אנו נשתמש בכל הכתבה.

אנחנו יכולים להשתמש ערכים שונים בתוך ה מינימום מקסימום() פונקציה, הכל תלוי איזה סוג של רשת מותאמת אישית אנחנו רוצים ליצור.

ערכי אורך סטטיים

ישנן שתי דרכים בסיסיות כיצד אנו יכולים להשתמש מינימום מקסימום() לתפקד עם ערכי אורך סטטיים.

ראשית, אנחנו יכולים להשתמש מינימום מקסימום() רק עבור עמוד אחד ברשת ולהגדיר את רוחב העמודות האחרות כערכים סטטיים פשוטים (פיקסלים כאן).

 רשת תבנית-עמודות: minmax (100px, 200px) 200px 200px; 

בהדגמה gif להלן, אתה יכול לראות כי פריסה זו לא מגיבים, עם זאת, בעמודה הראשונה יש גמישות מסוימת. העמודות השנייה והשלישית שומרות על רוחב קבוע שלהן (200 פיקסלים), ואילו הטור הראשון נע בין 100 פיקסלים ל -200 פיקסלים, בהתבסס על השטח הזמין.

שנית, אנחנו יכולים להגדיר את רוחב יותר מעמוד אחד ברשת באמצעות מינימום מקסימום(). ערכי המינימום והמקסימום הם סטטיים, ולכן כברירת מחדל, הרשת היא לא מגיבים. עם זאת, הטורים עצמם גמיש, אבל רק בין 100px ו 200px. הם לגדול ולהתכווץ בו זמנית כפי שאנו לשנות את גודל התצוגה.

 רשת-תבנית-עמודות: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px); 

שים לב שאנחנו יכולים גם להשתמש ב חזור() פונקציה togehter with מינימום מקסימום(). לכן, ניתן גם לכתוב את קטע הקוד הקודם כך:

 רשת תבנית עמודות: לחזור (3, minmax (100px, 200px)); 

ערכי אורך דינמי

מלבד ערכים סטטיים, מינימום מקסימום() הפונקציה גם מקבלת אחוז יחידות וה יחידת שבר חדשה (fr) כמו טיעונים. באמצעות אותם, אנו יכולים להשיג רשתות מותאמות אישית כי הן תגובה ו לשנות את ממדיהם על פי השטח הזמין.

הקוד להלן מציג רשת שבה רוחב העמודה הראשונה נע בין 50% ל 80% ואילו השני והשלישי שווה לחלוק את החלל שנותר.

 רשת תבנית-עמודות: minmax (50%, 80%) 1fr 1fr; 

כאשר אנו משתמשים בערכים דינמיים עם מינימום מקסימום() פונקציה, זה חיוני כדי להקים הכלל הגיוני. תן לי להראות לך דוגמה איפה הרשת מתמוטטתYou

 רשת תבנית-עמודות: minmax (1fr, 2fr) 1fr 1fr; 

כלל זה אינו הגיוני, כמו הדפדפן לא מסוגל להחליט אשר הערך להקצות ל מינימום מקסימום() פונקציה. הערך המינימלי יוביל ל 1fr 1fr רוחב העמודה, בעוד המקסימום 1fr. אבל, שניהם אפשריים גם על מסך קטן מאוד. יש דבר הדפדפן יכול להתייחס אליו.

הנה התוצאה:

שלב ערכים סטטיים ודינמיים

זה גם אפשרי לשלב ערכים סטטיים ודינמיים. למשל, בהדגמה Codepen לעיל, השתמשתי minmax (100px, 200px) 1fr 1fr; כלל המוביל לרשת שבה העמודה הראשונה נע בין 100px ל 200px ואת החלל שנותר בין שני האחרים.

 רשת תבנית עמודות: minmax (100px, 200px) 1fr 1fr; 

זה interesing כדי לראות את זה כמו Viewport גדל, הראשון, העמודה הראשונה גדלה מ 100px ל 200px. שני האחרים, נשלטים על ידי יחידת fr, מתחילים לגדול רק לאחר שהראשון הגיע לרוחבו המרבי. זה הגיוני, כמו המטרה של יחידת השבר היא לחלק את החלל זמין (שנותר).

ה min-content, מקסימום תוכן, ו אוטומטי מילות מפתח

יש סוג שלישי של ערך אנחנו יכולים להקצות את מינימום מקסימום() פונקציה. ה min-content, מקסימום תוכן, ו אוטומטי מילות מפתח מתייחסות לממדים של מסלול רשת התוכן שהוא מכיל.

מקסימום תוכן

ה מקסימום תוכן מילת מפתח מפנה את הדפדפן כי טור הרשת צריך להיות רחב כמו האלמנט הרחב ביותר שהוא מכיל.

על ההדגמה להלן, שמתי תמונה בגודל 400 פיקסלים בתוך המסלול הראשון של הרשת, והשתמשת בכללי CSS הבאים (ניתן למצוא הדגמה Codepen עם קוד שונה לחלוטין בסוף המאמר)You

 .מכולה grid-template-columns: max-content 1fr 1fr; / ** * זהה עם minmax () סימון: * רשת תבנית תבנית עמודות: minmax (מקסימום תוכן, מקסימום תוכן) 1fr 1fr; * / 

לא השתמשתי מינימום מקסימום() עדיין, אבל בקוד הערה לעיל אתה יכול לראות איך אותו קוד היה נראה עם זה (למרות שזה מיותר כאן).

כפי שניתן לראות, העמודה הראשונה של הרשת היא רחבה כמו האלמנט הרחב ביותר שלה (כאן התמונה). בדרך זו, המשתמשים יכולים תמיד לראות את התמונה בגודל מלא. עם זאת, תחת גודל תצוגה מסוים, פריסה זו היא לא מגיבים.

min-content

ה min-content מילת מפתח מכוון את הדפדפן כי עמודה הרשת צריך להיות רחב כמו אלמנט צר ביותר שהוא מכיל, בדרך ש אינו מוביל לגלישה.

בואו נראה איך ההדגמה הקודמת עם התמונה נראית כאילו נשנה את הערך של העמודה הראשונה min-contentYou

 .מכולה grid-template-columns: min-content 1fr 1fr; / ** * זהה עם minmax () סימון: * רשת תבנית-עמודות: minmax (דקות תוכן, דקות תוכן) 1fr 1fr; * / 

עזבתי את הרקע הירוק מתחת לתמונה, כך שתוכל לראות את הגודל המלא של תא הרשת הראשון.

כפי שניתן לראות, העמודה הראשונה שומרת על הרוחב הקטן ביותר ניתן להשיג ללא הצפת. בדוגמה זו, זה יוגדר על ידי רוחב מינימלי של 4 ו 7 תאים ברשת, אשר נובעת ריפוד ו גודל גופן מאפיינים, כמו התמונה בתא הראשון יכול להיות מכווץ לאפס ללא גלישה.

אם תא הרשת הכיל מחרוזת טקסט, min-content יהיה שווה לרוחב המילה הארוכה ביותר, כי זה האלמנט הקטן ביותר שלא ניתן להקטין אותו עוד יותר. הנה מאמר נהדר על ידי BitsOfCode שבו אתה יכול לראות איך min-content ו מקסימום תוכן להתנהג כאשר תא הרשת מכיל מחרוזת טקסט.

שימוש min-content ו מקסימום תוכן יחד

אם אנחנו להשתמש min-content ו מקסימום תוכן יחד בתוך ה מינימום מקסימום() פונקציה אנחנו מקבלים טור רשת כי:

1. הוא מגיב
2. אין כל גלישה
3. אינו הולך וגדל מן היסוד הרחב ביותר שלו

 .מכולה grid-template-columns: minmax (min-content, max-content) 1fr 1fr;  

אנחנו יכולים גם להשתמש min-content ו מקסימום תוכן מילות מפתח יחד עם ערכי אורך אחרים בתוך ה מינימום מקסימום() עד שהכלל יהיה הגיוני. לדוגמה, minmax (25%, מקסימום תוכן) או minmax (min-content, 300px) יהיו גם כללים חוקיים.

אוטומטי

לבסוף, אנחנו יכולים גם להשתמש אוטומטי מילת מפתח כטיעון של מינימום מקסימום() פונקציה.

מתי אוטומטי J משמש מרבי, ערכו זהה מקסימום תוכן.

כשזה משמש מינימום, הערך שלה מוגדר על ידי min-width / min-height הכלל, כלומר אוטומטי הוא לפעמים זהה min-content, אבל לא תמיד.

בדוגמה הקודמת שלנו, min-content האם שווה ל אוטומטי, כמו רוחב מינימלי של העמודה הראשונה ברשת הוא תמיד קטן יותר מאשר גובה מינימלי. אז, את השתייכות כלל CSS:

 .מכולה grid-template-columns: minmax (min-content, max-content) 1fr 1fr;  

יכול להיות כתוב גם ככה:

 .מכולה grid-template-columns: minmax (auto, auto) 1fr 1fr;  

ה אוטומטי מילת מפתח יכולה להיות גם יחד עם יחידות סטטיות ודינמיות אחרות (פיקסלים, יחידת fr, אחוזים, וכו ') בתוך מינימום מקסימום() פונקציה, למשל minmax (אוטומטי, 300 פיקסלים) יהיה כלל חוקי.

אתה יכול לבדוק איך min-content, מקסימום תוכן, ו אוטומטי מילות מפתח לעבוד עם מינימום מקסימום() פונקציה בהדגמה Codepen הבאה: