8.37. Foundation grid instance

发布时间 ： 2025-10-25 13:33:53 UTC      

Page Views: 9 views

Below we collect some examples that are commonly used in the grid.

8.37.1. Three equal series

This example demonstrates how to create three equal columns (33.3% and 33.3%), display three columns on medium and large devices, and stack them automatically on small devices:

Example 

<div class="row"> <div class="medium-4 columns" style="background-color:yellow;"> <p>.medium-4p> div> <div class="medium-4 columns" style="background-color:pink;"> <p>.medium-4p> div> <div class="medium-4 columns" style="background-color:yellow;"> <p>.medium-4p> div> div>    
  尝试一下 »  
   
 
  8.37.2.  Three unequal columns  
 
 This example demonstrates how to create three unequal columns (25%, 50%, 25%, 25%), display three columns on medium and large devices, and stack automatically on small devices: 
 
 
 Example  
 
 
 
<div class="row"> <div class="medium-3 columns" style="background-color:yellow;"> <p>.medium-3p> div> <div class="medium-6 columns" style="background-color:pink;"> <p>.medium-6p> div> <div class="medium-3 columns" style="background-color:yellow;"> <p>.medium-3p> div> div>    
  尝试一下 »  
   
 
  8.37.3.  Two equal columns  
 
 This example demonstrates how to create two equal columns (50% plank 50%), and the proportion listed on small, medium, and large devices is always 50% Universe 50%: 
 
 
 Example  
 
 
 
<div class="row"> <div class="small-6 columns" style="background-color:yellow;"> <p>.small-6p> div> <div class="small-6 columns" style="background-color:pink;"> <p>.small-6p> div> div>    
  尝试一下 »  
   
 
  8.37.4.  Two unequal columns  
 
 This example demonstrates how to create two unequal columns (33.3% plank 66.6%), and the proportion listed on small, medium, and large devices is always 33.3% Universe 66.6%: 
 
 
 Example  
 
 
 
<div class="row"> <div class="small-8 columns" style="background-color:yellow;"> <p>.small-8p> div> <div class="small-4 columns" style="background-color:pink;"> <p>.small-4p> div> div>    
  尝试一下 »  
   
 
  8.37.5.  Modify the order of the columns  
 
 By using the   .small|medium|large-push-*   And   .small|medium|large-pull-*   Class to modify the order of the columns 
 
 
 Example  
 
 
 
<div class="row"> <div class="small-4 small-8-push columns" style="background-color:yellow;"> <p>.small-4 .small-8-pushp> div> <div class="small-8 small-4-pull columns" style="background-color:pink;"> <p>.small-8 .small-4-pullp> div> div>    
  尝试一下 »  
   
 
  8.37.6.  Nested column  
 
 You can use a nested grid (insert columns in columns): 
 
 
 Example  
 
 
 
<div class="row"> <div class="small-8 columns">.small-8 <div class="row"> <div class="small-8 columns">.small-8 Nested <div class="row"> <div class="small-8 columns">.small-8 Nested Againdiv> <div class="small-4 columns">.small-4div> div> div> <div class="small-4 columns">.small-4div> div> div> <div class="small-4 columns">.small-4div> div>    
  尝试一下 »  
   
 
  8.37.7.  Hybrid: mobile phones, desktop devices  
 
 The Foundation grid system has three columns:   .small-*   (mobile phone)   .medium-*   (flat panel), and   .large-*   (desktop devices). These classes can be combined dynamically to make the layout more flexible: 
 
  提示：  Each class can be zoomed in, and you can specify it if you want the width of both small and large screen devices to be the same.   .small-*   . 
 
 
 Example  
 
 
 
<div class="row"> <div class="small-6 large-8 columns">.small-6 .large-8div> <div class="small-6 large-4 columns">.small-6 .large-4div> div> <div class="row"> <div class="small-2 large-4 columns">.small-2 .large-2div> <div class="small-4 large-4 columns">.small-4 .large-2div> <div class="small-6 large-4 columns">.small-6 .large-2div> div> <div class="row"> <div class="small-3 large-5 columns">.small-3 .large-5div> <div class="small-9 large-7 columns">.small-9 .large-7div> div>    
  尝试一下 »  
   
 
  8.37.8.  Hybrid: mobile, tablet and desktop devices  
 
 
 Example  
 
 
 
<div class="row"> <div class="medium-6 large-8 columns">.medium-6 .large-8div> <div class="medium-6 large-4 columns">.medium-6 .large-4div> div> <div class="row"> <div class="small-4 medium-3 large-7 columns">.small-4 .medium-3 .large-7div> <div class="small-4 medium-6 large-3 columns">.small-4 .medium-6 .large-3div> <div class="small-4 medium-3 large-2 columns">.small-4 .medium-3 .large-2div> div>    
  尝试一下 »  
   
 
  8.37.9.  Center column  
 
 Can be used in the list   .small-centered   Class. Medium and large devices can inherit the center of small devices, but you need to set the center class on large devices   .large-centered   . 
 
 
 Example  
 
 
 
<div class="row"> <div class="small-4 small-centered columns">small-4 small-centereddiv> div> <div class="row"> <div class="small-6 small-centered columns">small-6 small-centereddiv> div> <div class="row"> <div class="small-6 large-centered columns">small-6 large-centereddiv> div> <div class="row"> <div class="small-8 small-centered large-uncentered columns">small-8 small-centered large-uncentereddiv> div> <div class="row"> <div class="small-10 small-centered columns">small-10 small-centereddiv> div>    
  尝试一下 »  
   
 
  8.37.10.  Column offset  
 
 Can be used   .large-offset-*   (or   .small-offset-*   Class sets the column to the right The number of columns in the left outer margin is controlled by the* sign: 
 
 
 Example  
 
 
 
<div class="row"> <div class="large-1 columns">1div> <div class="large-11 columns">11div> div> <div class="row"> <div class="large-1 columns">1div> <div class="large-10 large-offset-1 columns">10, offset 1div> div> <div class="row"> <div class="large-1 columns">1div> <div class="large-9 large-offset-2 columns">9, offset 2div> div> <div class="row"> <div class="large-1 columns">1div> <div class="large-8 large-offset-3 columns">8, offset 3div> div>    
  尝试一下 »  
   
 
  8.37.11.  Incomplete column  
 
 If the sum of the columns in a row is not 12, Foundation automatically floats the last column to the right and fills the remaining columns with whitespace. 
 
 Optional   .end   Class is used to set the elements of the last column to float to the left 
 
 
 Example  
 
 
 
<div class="row"> <div class="medium-3 columns">.medium-3div> <div class="medium-3 columns">.medium-3div> <div class="medium-3 columns">.medium-3div> div> <div class="row"> <div class="medium-3 columns">.medium-3div> <div class="medium-3 columns">.medium-3div> <div class="medium-3 columns end">.medium-3 .enddiv> div>    
  尝试一下 »  
   
 
  8.37.12.  Wide screen  
 
 Grid (   .row   The maximum size (max-width) is 62.5rem On widescreen devices, the size may be larger than 62.5rem, so the columns cannot fully fill the page, even if the width is set to 100%. But we can set the new max-width through CSS: 
 
 
 Example  
 
 
 
<style> .row { max-width: 100%; } style>    
  尝试一下 »  
 
 If you want to use the default max-width, but the background color needs to span the entire page, you use the   .row   Class and specify the background color you want: 
  
 
 Example  
 
 
 
<div style="background-color:coral;padding:25px;"> <div class="row"> <div class="small-6 columns" style="background-color:yellow;">.small-6div> <div class="small-6 columns" style="background-color:pink;">.small-6div> div> div>    
  尝试一下 »  
    
                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            8.37. Foundation grid instance 
                        

                    

                

            
        
        

            

    
        
        

            

                

                    
                        
                            
                                Web框架 
                            
                            
                        
                             946
                        
                    
                    
                    
                        

                            
 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                《地理信息系统原理、技术与方法》 
                            
                            
                        
                             97
                        
                    
                    
                    
                        

                            
 
 
 最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                WEB基础 
                            
                            
                        
                             289