草庐IT

Grid布局

王帅康_2022公益强化班 2023-03-28 原文

Grid布局

Flexbox用于设计横向或者纵向的布局，而Grid布局则被设计用于在两个维度上，即把元素按列和行排列整齐

通flex一样，通过指定display的值可以转到grid布局，即display:grid

下面例子使用了于flex例子类似的方法，描述了一个容器和若干个子元素。

其中：

除了使用display:grid，还分别使用了

grid-template-rows:定义行的轨道

grid-template-columns:定于列的轨道

grid-gap:定义子元素的间隔

<style type="text/css">

    .wrapper{

        display: grid;

        grid-template-columns: 1fr 1fr 1fr;

        grid-template-rows: 100px 100px;

        grid-gap: 10px;

    }

    .wrapper > div{

        border-style: solid;

    }

//定义了三个1fr的列、两个100px的行和10px的间隔

</style>

<div class="wrapper">

    <div class="box1">One</div>

    <div class="box2">Two</div>

    <div class="box3">Three</div>

    <div class="box4">Four</div>

    <div class="box5">Five</div>

    <div class="box6">Six</div>

</div>

显示出：

无需再在子元素上指定任何规则，它们自动地排列在了创建好地格子中

在grid布局中，你可以显式地将元素自由摆放，而不是依赖浏览器的自动排列。

定义一个与上面一样的grid，但是只用三个元素，利用grid-column和grid-row两个属性来指定一个元素应该从哪一行/列开始，并在哪一行/列结束，这样能让一个元素在多个行与列之间展开

row：第几行 column：第几列

<style type="text/css">

    .wrapper{

        display: grid;

        grid-template-columns: 1fr 1fr 1fr;

        grid-template-rows: 100px 100px;

        grid-gap: 10px;

    }

    .wrapper > div{

        border-style: solid;

    }

    .box1{

        grid-row: 1;

        grid-column: 2/4;

    }

    .box2{

        grid-row: 1/3;

        grid-column: 1;

    }

    .box3{

        grid-row: 2;

        grid-column: 3;

    }

</style>

<div class="wrapper">

    <div class="box1">One</div>

    <div class="box2">Two</div>

    <div class="box3">Three</div>

</div>

显示：


Grid布局griddivsection

有关Grid布局的更多相关文章

  1. ruby - nanoc 和多种布局 - 2

    是否可以为特定(或所有)项目使用多个布局？例如，我有几个项目，我想对其应用两种不同的布局。一个是绿色的，一个是蓝色的(但是)。我想将它们编译到我的输出目录中的两个不同文件夹中(例如v1和v2)。我一直在玩弄规则和编译block，但我不知道这是怎么回事。因为，每个项目在编译过程中只编译一次，我不能告诉nanoc第一次用layout1编译，第二次用layout2编译。我试过这样的东西，但它导致输出文件损坏。compile'*'doifitem.binary?#don’tfilterbinaryitemselsefilter:erblayout'layout1'layout'layout2'

  2. ruby-on-rails - 我可以在没有 Controller 的情况下直接从 routes.rb 渲染布局吗？ - 2

    我想为网站的管理和公共(public)部分设置一对样式指南。每个都需要自己的布局，其中包含静态html和调用erbpartials的混合(因此静态页面不会削减它)。我不需要Controller来为这些页面提供服务，而且我不希望有效的仅开发内容使其余代码困惑。这让我想知道是否有一种方法可以直接呈现布局。免责声明:我明白这不是我应该经常/永远做的事情，而且我知道有很多争论可以解释为什么这是一个坏主意。我对这是否可能感兴趣。有没有办法让我直接从routes.rb渲染布局而不通过Controller？ 最佳答案 出于某种奇怪的原因，我想暂时

  3. ruby-on-rails - 设计 Controller 如何改变布局？ - 2

    这个问题在这里已经有了答案:differentlayoutforsign_inactionindevise(8个答案)关闭7年前。如何更改设计Controller中的布局？

  4. ruby-on-rails - Rails - 如何在布局中查找域 url - 2

    我有request.env['http_host']在本地主机上工作，但在heroku的布局页面中引用时会导致错误。此请求在View中工作并显示正确的基本url，但是当我将代码移动到布局时它会导致错误。注意-我正在使用它来为html电子邮件中的图像构建绝对url。收到错误:ActionView::Template::Error(undefinedmethod`env'fornil:NilClass): 最佳答案 如果你想要没有端口的主机，只需使用:request.host编辑:糟糕，我刚刚注意到您正在使用View中的代码。我不知道它

  5. Ruby GUI(非复杂布局) - 2

    我对RubyGUI设计做了很多研究，这似乎是Ruby倾向于落后的领域。我探索了MonkeyBars、wxRuby、fxRuby、Shoes等选项，只是想从Ruby社区获得一些意见。虽然它们绝对可用，但每一个的开发似乎都在下降。我在任何(减去fxRuby书)上都找不到大量有用的文档或用户基础。我只是想制作一个简单的GUI，所以我真的不想花费数百小时来学习更复杂的工具的复杂性或尝试使用甚至不再开发的东西(鞋子是应用程序的类型我正在寻找，但它有很多问题并且没有得到积极开发。)在所有选项中，你们会推荐哪个选项是最快的，并且仍然具有某种开发基础？谢谢! 最佳答案

  6. ruby - Rails 渲染 Controller 中的部分和布局 - 2

    我正在覆盖设计注册Controller的创建操作。我有两种注册表格，个人或公司，公司有一个名为company_form的字段设置为true以区分这两种表格。在表单验证后，我希望呈现正确的表单(以前无论我使用什么表单，它都会返回默认表单)。我遇到了一个问题，即只渲染了部分(很明显，因为我只渲染了部分)，但我还需要渲染布局/应用程序文件。classRegistrationsControllerifresource.company_formrenderpartial:'shared/company_signup_form'elserenderpartial:'/shared/individu

  7. ruby-on-rails - 缺少带有 { :locale=>[:en], :formats=>[:html], 的模板布局/邮件程序 - 2

    我正在学习michaelharltrails教程，但出现此错误Missingtemplatelayouts/mailerwith{:locale=>[:en],:formats=>[:html],:variants=>[],:handlers=>[:raw,:erb,:html,:builder,:ruby,:coffee,:jbuilder]}.Searchedin:*"/home/ubuntu/workspace/app/views"预览账户激活时这是我的user_mailer.rbclassUserMailer错误突出显示了mailto:user.email,subject:"A

  8. ruby - Sinatra 中的嵌套布局 - 2

    tl;dr:在Sinatra中是否有一种干净的嵌套布局方式？对于我网站上的所有页面，我有一个通用的layout.erb，它呈现页眉、页脚和其他一些位。对于这些页面的一个子集，我想使用内部布局，除了那些公共(public)位之外，它还呈现左侧菜单。全局erb:pageTemplate执行layout.erb，其中yield执行pageTemplate在子集中erb:pageTemplate执行layout.erb，其中yield执行specificLayout.erb，其中yield执行pageTemplate。有道理吗？我对单独的类、before语句和任何其他ruby​​魔法持开放态度

  9. ruby-on-rails - 在 Rails 中是否可以动态加载类布局？ - 2

    我需要消息在项目中有不同的布局，是否可以在Rails中做这样的事情？ClassMessages::New谢谢 最佳答案 这对你有帮助classMessagesController 关于ruby-on-rails-在Rails中是否可以动态加载类布局？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/1274999/

  10. ruby - 使用 slim 或 haml 在独立(非 rails)ruby 应用程序中指定布局和模板 - 2

    我正在尝试在独立(非Rails)应用程序中做这样的事情:layout.slim:h1Hello.content=yield显示.slim:=object.name=object.description我不知道如何指定布局和模板。这对slim(或haml)有可能吗？谢谢。 最佳答案 layout.slim文件如下所示:h1Hello.content==yieldcontents.slim文件如下所示:=name这可以缩短，但为了便于解释，我将其分成了各个步骤。require'slim'#Simpleclasstorepresentan

随机推荐