`
bagwg1127
  • 浏览: 2075 次
  • 性别: Icon_minigender_1
  • 来自: 南京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

Grid式与画布式布局的优劣

阅读更多
个人以为,Grid式布局唯一可能存在的优势在于
    Grid式布局可以很方便地做到每个元素的对齐,格子定位已经做好了,只需在对应的格子里写下内容,其内容就必然是对齐的
    画布式布局如果要做到对齐,大多需要用户通过拖拽的方式,再加以对齐线,以实现对齐的效果,在操作上就比Grid式布局稍微麻烦一些

    但同时,因为Grid的这种布局方式,如果需要对布局稍作调整的话,就不那么方便了,于是就有拆分单元格的功能,把一个格子拆成多个,以进行一些细微的布局或是改变原有的布局

针对报表而言,Grid式布局还可能存在一个好处,目前Excel应用广泛,用户需要做到的报表效果,大多是用Excel做一个初稿,再让设计人员用报表工具照着做,所以就有了两点优势
    1.用Grid式布局与Excel对比着做模板,很直观
    2.Grid式布局的报表工具,大多支持直接把Excel文件转成自有的格式,省去了用户做模板时比较头疼的一步------格式布局的调整

综上所述,在报表工具领域,画布式布局相对Grid式布局的优势,仅仅在于用户需要对模板进行一些微调时,可能会稍微有一些方便而已
但如果在其它领域,并不需要与Excel无缝结合的话,Grid式布局并没有什么优势,反而会是一个局限,因为布局方式有很多种,除了GridLayout,还有BorderLayout,TableLayout,FlowLayout等等

转自:http://sites.google.com/site/hhxxttxs001/HM/gridshiyuhuabushibianjibaobiaodeyoulie
分享到:
评论

相关推荐

    Grid布局综合Demo案例

    网格布局(Grid布局)是CSS3中的一个强大工具,它为网页设计提供了二维的、基于网格的布局系统,使得在创建复杂且响应式的页面布局时更加灵活和有序。本综合Demo案例将深入探讨如何利用Grid布局来实现各种复杂的网页...

    Grid简单入门布局.pptx

    【CSS Grid布局】是Web开发中的二维布局系统,主要用于网页设计和前端开发,它使得创建复杂的、响应式的、均匀分布的布局变得更加简单。在【Grid简单入门布局.pptx】的技术分享中,主要介绍了Grid布局的基本概念、与...

    基于grid布局实现的响应式栅格系统

    在本文中,我们将深入探讨如何利用CSS Grid布局来构建一个强大的响应式栅格系统,以及如何结合SCSS(Sassy CSS)进行更高效、可维护的编码。 1. CSS Grid布局基础: CSS Grid布局是CSS3中引入的一种二维布局系统,...

    Grid、UniformGrid布局

    Grid 布局与 Java AWT 中的 GridLayout 类似,但有所不同。 Grid 布局的特点是: * 每个单元格可以放置多个控件,但控件可能会层叠在一起。 * 支持单元格的合并,类似于 HTML 中的 table td 中的 rowspan 和 ...

    响应式布局小案例

    在HTML5响应式设计中,常常使用`display: flex`或`grid`来实现更灵活的布局管理。 3. **弹性图片**:弹性图片是指图片的宽度自动适应其容器的宽度,而高度按比例缩放,以保持原始的宽高比。这可以通过设置图片宽度...

    WPF经典教程之Grid、UniformGrid布局

    本教程主要聚焦于两种常用的布局容器:Grid和UniformGrid。 一、Grid布局 Grid是WPF中最基本且强大的布局容器之一,它将窗口划分为一个二维网格,每个单元格可以容纳一个或多个控件。Grid的一个显著特点是其灵活性...

    静态grid网格响应式布局项目

    在"静态grid网格响应式布局项目"中,响应式设计将与Grid布局结合,确保在不同屏幕尺寸下,网格元素能自动调整,以适应用户的查看环境。 3. Glide插件: Glide是一款轻量级的JavaScript滑动插件,主要用于创建滑动...

    jQuery响应式可拖拽的元素组件网格布局插件 gridstack.js

    《jQuery响应式可拖拽的元素组件网格布局插件Gridstack.js详解》 在Web开发领域,用户界面的交互性和可定制性越来越受到重视。Gridstack.js是一款基于jQuery的响应式可拖拽的元素组件网格布局插件,它提供了一种...

    grid网格布局页面+响应式.zip

    3. **响应式Grid**:将Grid布局与响应式设计结合,可以创建出灵活且适应性强的页面结构。例如,可以使用`fr`单位或百分比来定义网格轨道的大小,使得它们可以根据可用空间动态调整。同时,还可以利用`grid-auto-flow...

    拥抱未来的CSS布局方式flex与grid布局

    "拥抱未来的CSS布局方式flex与grid布局"这个主题将深入探讨两种主流的布局技术:Flexbox(弹性盒布局)和Grid Layout(网格布局),它们彻底改变了我们对网页布局的理解和实践。 **一、Flexbox布局** Flexbox,...

    响应式网页布局 流式网络布局

    响应式网页布局与流式网络布局是现代网页设计的核心技术,尤其对于初学者而言,掌握这两项技能至关重要。响应式网页布局确保了网页在不同设备和屏幕尺寸上都能呈现出良好的用户体验,而流式网络布局则是实现这一目标...

    html5 css3响应式布局介绍及设计流程 实现响应式布局的3种手段.zip_html5响应式布局怎么写

    此外,CSS3还引入了Flexbox(弹性盒模型)和Grid(网格布局),这两种布局模型为创建复杂的响应式布局提供了更多灵活性。Flexbox适用于一维布局,如导航栏或列表,可以轻松实现元素的对齐、排列和自适应大小。Grid则...

    响应式布局实例

    总结来说,响应式布局实例是学习如何利用CSS3媒体查询、流式布局、弹性图片和现代布局方法(如Flexbox和Grid)来创建适应各种设备的网页的重要资源。通过分析`style.css`中的样式规则和`index.html`中的HTML结构,你...

    SmartCSSGrid是基于CSSGRID的流体响应式布局系统具有12列

    在JavaScript开发中,CSS Grid通常与JavaScript库或框架结合使用,以实现动态内容加载、交互式组件或者在不同屏幕尺寸下切换布局的功能。虽然SmartCSSGrid主要依赖CSS,但可能包含一些JavaScript代码来增强功能,...

    grid.rar_grid布局

    5. **响应式设计**:CSS Grid也支持响应式设计,通过媒体查询(`@media`)可以针对不同屏幕尺寸调整网格布局。 6. **图片(1.jpg)的作用**:通常,图片文件可能是用来可视化网格布局的示意图,帮助用户更直观地理解4...

    响应式布局

    响应式布局的核心在于使用媒体查询(Media Queries)、弹性网格布局(Flexible Grid)、流式布局(Fluid Layout)以及自适应图像(Responsive Images)等技术。以下是对这些关键概念的详细解释: 1. **媒体查询**:...

    响应式布局大全代码

    响应式布局是现代网页设计的关键技术之一,它允许网页在不同设备上自适应显示,无论是桌面电脑、平板电脑还是智能手机,都能提供良好的用户体验。在这个"响应式布局大全代码"压缩包中,我们可以期待找到一系列使用...

    wpf Grid布局

    在实际开发中,Grid布局通常与其他布局控件(如StackPanel、DockPanel等)结合使用,以实现更丰富的界面设计。视频资源“Grid布局.avi”可能会提供更直观的示例和演示,帮助你更好地理解和应用这些知识点。

    grid布局demo.html

    grid布局demo.html

    仿Pinterest网格瀑布流响应式布局代码

    通过使用媒体查询(Media Queries)、弹性网格布局(Flexible Grid)、流式布局(Fluid Layout)以及可伸缩的图像和媒体,响应式设计可以确保网页在不同分辨率和屏幕尺寸的设备上都能正常显示。在仿Pinterest布局中...

Global site tag (gtag.js) - Google Analytics