Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de sitios web, aplicaciones y correos electrónicos receptivos sorprendentes que parecen increíbles y pueden ser accesibles para cualquier dispositivo.
En este artículo, discutiremos el marco de cuadrícula XY en Foundation CSS.
.cuadrícula-marco
- grid-frame: Esta clase nos ayuda a fijar la altura de la cuadrícula. Si coloca esta clase en la cuadrícula exterior, tomará la altura del puerto y si la usa en la cuadrícula anidada, tomará la altura del contenedor.
<div class="grid-frame">
...
</div>
A continuación se muestran los ejemplos que ilustran el uso de las clases XY Grid Frame:
Ejemplo 1: Este ejemplo ilustra el uso de la clase .grid-frame para texto.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous" /> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"></script> </head> <body style="padding: 50px"> <div class="grid-y grid-frame"> <div class="cell shrink header medium-cell-block-container" style="border: 2px solid green"> <h3> <strong>XY Grid Frame Header</strong> </h3> <div class="grid-x grid-padding-x"> <div class="cell medium-4"> Header column-1 covering 4 grid blocks. </div> <div class="cell medium-4 medium-cell-block"> <p style="width: 80vw"> Header middle column-2 covering 4 grid blocks. </p> </div> <div class="cell medium-4"> Header column-3 covering 4 grid blocks </div> </div> </div> <div class="cell medium-auto medium-cell-block-container" style="border: 2px solid rgb(9, 88, 9)"> <div class="grid-x grid-padding-x"> <div class="cell medium-4 medium-cell-block-y"> <h3> <strong>XY Grid Frame sidebar scrolling</strong> </h3> <p> Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </p> <p> Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </p> <p> Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </p> <p> Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </p> <p> Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </p> </div> <div class="cell medium-8 medium-cell-block-y"> <h3> <strong>XY Grid Frame body scrolling</strong> </h3> <p> We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> <p> We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> <p> We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> <p> We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> <p> We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> </div> </div> </div> <div class="cell shrink footer" style="border: 2px solid green"> <h3> <strong>XY Grid Frame footer</strong> </h3> <p> We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses </p> </div> </div> </body> </html>
Producción:
Ejemplo 2: Este ejemplo ilustra el uso de la clase .grid-frame para imágenes.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous" /> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"></script> </head> <body style="padding: 50px"> <div class="grid-y grid-frame"> <div class="cell shrink header medium-cell-block-container" style="border: 2px solid green"> <h3> <strong>XY Grid Frame Header</strong> </h3> <div class="grid-x grid-padding-x"> <div class="cell medium-4"> Header column-1 covering 4 grid blocks. </div> <div class="cell medium-4 medium-cell-block"> <p style="width: 80vw"> Header middle column-2 covering 4 grid blocks. </p> </div> <div class="cell medium-4"> Header column-3 covering 4 grid blocks </div> </div> </div> <div class="cell medium-auto medium-cell-block-container" style="border: 2px solid rgb(9, 88, 9)"> <div class="grid-x grid-padding-x"> <div class="cell medium-4 medium-cell-block-y"> <h3> <strong>XY Grid Frame sidebar scrolling</strong> </h3> <p> Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </p> <p> Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </p> <p> Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </p> <p> Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </p> <p> Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </p> </div> <div class="cell medium-8 medium-cell-block-y"> <h3> <strong>XY Grid Frame body scrolling</strong> </h3> <p> We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> <p> We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> <p> We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> <p> We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> <p> We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> </div> </div> </div> <div class="cell shrink footer" style="border: 2px solid green"> <h3> <strong>XY Grid Frame footer</strong> </h3> <p> We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses </p> </div> </div> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/xy-grid.html#grid-frame
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA