p{background-color:#FFC2C2;填充：0；保证金：0；文本对齐：居中；白颜色;}网格布局的作用是更有效地控制网页中元素的比例。比如博客的留言区：大屏幕时占屏幕宽度的25%，出现在博文的右侧；当屏幕较小时，它会占据100%的屏幕宽度，并出现在博文的底部。实现这种布局需求的一种方法：将所有的宽度划分成固定数量的列（columns），从而更有效地控制元素宽度1基本网格系统基本网格系统包括：container容器、row元素rows、column元素columns和columns的作用gapgutter1.1containercontainer：设置整个网格的宽度。容器的宽度一般为100%，可以设置一个max-width.grid-container{width:100%;最大宽度：1200px；/*optional*/}1.2rowsrows的作用：保持列元素column不溢出其他行。使用清除浮点数的方法，保证每一行元素都保留在行元素中/*保证行元素中的列元素不会溢出到其他行*/.row::after,.row::before{content:"";显示：块；明确：两者；高度：0；overflow:hidden;}1.3column列是网格系统中最复杂的部分，包括列元素定位、列元素宽度和响应式设计要求。列元素定位float,display:inline-block;,display:table;并显示：flex；都可以实现列元素定位。首先使用float：最常见也最容易出错。如果列元素为空，则浮动的列元素将堆叠在其他元素之上。为列元素设置最小高度1px可以避免[class*="col-"]{float:left;min-width:1px;}列元素宽度列元素的宽度由容器宽度/列号计算。容器宽度设置为100%，当需要分成6列时，每列的宽度为16.66%。[class*="col-"]{浮动：左；最小宽度：1px；width:16.66%;}如果要设置两列元素宽度的部分，则需要创建两倍宽的列元素：通过组合，可以创建多种宽度。使用列元素组合时，只需要考虑任意一行的列元素个数增加到6个的情况。/*组合多列的宽度*/.col-1{width:16.66%;}.col-2{width:33.33%;}.col-3{width:50%;}.col-4{width:66.664%;}.col-5{width:83.33%;}.col-6{width:100%;}列间距Gutter使用border-box为具有百分比宽度的元素设置固定的padding。使用border-boxmodel.grid-container{width:100%;很容易创建列宽。最大宽度：1200px；框大小：边框框；/*需要使用百分比宽度的固定填充值*/}[class*="col-"]{float:left;最小宽度：1px；宽度：16.66%；/*设置列间距*/padding:12px;}1.4总结至此，一个基本的网格布局系统已经完成，您可以轻松使用。col-1
