我在哪里使用css网格

时间:2017-10-21 15:39:51

标签: html css

我一直在开发网站,但我现在正试图了解css网格。正如我在标题中所说,我需要知道我应该在我的网站中使用网格的位置。因为我应该在网格上延伸整个页面(无论我是否需要),并在需要时使用较小的网格。或者我应该在我需要它的某些地方使用网格。

我希望这是有道理的。并随意添加任何其他信息:)

提前致谢

1 个答案:

答案 0 :(得分:0)

尝试查看bootstrap3!它将使从移动设备扩展到更大的设备变得容易!你可以在这里找到关于网格bootstrap3的信息:https://getbootstrap.com/docs/3.3/css/,一旦你安装了它并在你的标题中设置你可以在你的身体标签中放下这样的东西,以了解网格系统是如何工作的,它是非常依赖正确使用容器。

<div class="container">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <h2>Title 1</h2>
        <p class="callouts-desc">
            Title 1 paragraph, blah blah blah.
        </p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <h2>Title 2</h2>
        <p class="callouts-desc">
            Title 2 paragraph, blah blah blah.
        </p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <h2>Title 3</h2>
        <p class="callouts-desc">
            Title 3 paragraph, blah blah blah.
        </p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <h2>Title 4</h2>
        <p class="callouts-desc">
            Title 4 paragraph, blah blah blah.
        </p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <h2>Title 5</h2>
        <p class="callouts-desc">
            Title 5 paragraph, blah blah blah.
        </p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <h2>Title 6</h2>
        <p class="callouts-desc">
            Title 6 paragraph, blah blah blah.
        </p>
    </div>
</div>

这应该证明在使用bootstrap3网格系统进行计算和游戏时非常有用