Foundation block mesh


May 04, 2021 14:00 Foundation5


Table of contents


Foundation block mesh

Block meshes are used to equally split page content: for example, to display four pictures in a row, you need to equally score widths regardless of the screen.

You can create a block mesh using the .small|medium|large-block-grid- num class. <ul> num is used to specify that the equal score is the quantity:

Instance

< ul class= "small-block-grid-3" >
< li > < img src= "newyork.jpg" alt= "New York" > < /li >
< li > < img src= "paris.jpg" alt= "Paris" > < /li >
< li > < img src= "sanfran.jpg" alt= "San Francisco" > < /li >
< /ul >

Try it out . . .

Another example, using a paragraph:

Instance

< ul class= "small-block-grid-3" >
< li > < p > Just a Simple Example Text... < /p > < /li >
< li > < p > Just a Simple Example Text... < /p > < /li >
< li > < p > Just a Simple Example Text... < /p > < /li >
< /ul >

Try it out . . .

Different size screens show different quantities

By adding multiple grid block classes, you can set different size screens to display different numbers of blocks:

Instance

< ul class= "small-block-grid-2 medium-block-grid-3 large-block-grid-4" >
< li > < img src= "newyork.jpg" alt= "New York" > < /li >
< li > < img src= "paris.jpg" alt= "Paris" > < /li >
< li > < img src= "sanfran.jpg" alt= "San Francisco" > < /li >
< li > < img src= "newyork.jpg" alt= "New York" > < /li >
< /ul >

Try it out . . .