如何创建单列网格？

在本文中，我们将学习如何创建单列网格。我们将讨论完成这项任务的两种方法。

方法 1：使用 jQuery Moblie 网格

jQuery Mobile是一组精心设计的用户界面交互、效果、小部件和主题，构建在 jQuery JavaScript 库之上。 JQuery 中的网格提供了基于 CSS 的响应式列。网格的宽度为 100%，网格没有背景颜色、边框和填充。网格中包含元素，这些元素可以使用ui-block-a/b/c/d/e并排浮动。

脚步：

• 通过 CDN 或本地将 jQuery Mobile 包含到 HTML 页面。
• 在正文中，创建一个类为ui-grid-solo的 div 元素。
• 在 div 元素中，我们创建另一个 div 元素，其类为ui-block-a 。
• 这样我们的单列网格就可以使用了。我们现在可以将任何东西添加到这个单一的网格中。

示例 1：

HTML

  

    
    
    

  

    
        
            
                Single Column Grid
            
        
    

  

输出：

方法二：在 CSS 中使用网格显示属性

CSS Grid提供了一个基于网格的布局系统，带有行和列，可以更轻松地设计没有浮动和定位的网页。我们可以使用它来创建我们的单列网格。

脚步：

• 创建一个 div 并将显示设置为 Grid 并将grid-template-columns属性设置为 100%。
• 现在在该 div 中创建另一个 div，这将是单列。
• 添加一些填充和边框你很高兴。

示例 2：

HTML

  

    

  

    

        
Single-column Grid
    

  

输出：