Below we collect some examples that are commonly used in the grid. 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: 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: 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%: 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%: By using the You can use a nested grid (insert columns in columns): The Foundation grid system has three columns: 提示： 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. Can be used in the list Can be used 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 Grid ( If you want to use the default max-width, but the background color needs to span the entire page, you use the
In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress. 8.37.1. Three equal series ¶
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 ¶
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 ¶
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 ¶
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 ¶
.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 ¶
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 ¶
.small-* (mobile phone) .medium-* (flat panel), and .large-* (desktop devices). These classes can be combined dynamically to make the layout more flexible: .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 ¶
.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 ¶
.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 ¶
.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 ¶
.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>
.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>
Principles, Technologies, and Methods of Geographic Information Systems
102