css如何设置指定网格的大小和位置-前端问答-PHP中文网

首页

web前端

前端问答

css如何设置指定网格的大小和位置

醉折花枝作酒筹

Aug 13, 2021 pm 05:35 PM

css

上一篇文章中我们了解了定义网格线大小的方法，请看《css如何定义网格线大小》。这次我们来了解一下设置指定网格的大小和位置的方法，有需要的可以参考参考。

之前我们去了一个如何去定义网格线的大小，这次来点不一样的。我们来看看一个小栗子。

<style>
      article {
          display: grid;
          width: 300px;
          height: 300px;
          grid-template-rows: repeat(3,1fr);
          grid-template-columns: repeat(3,1fr);
      }
      div{
          background: rgb(208, 159, 255);
          background-clip: content-box;
          border: solid 1px rgb(208, 159, 255);
          padding: 10px;
      }
      div:first-child{
        grid-row: 1 / span 2;
      }
    </style>
  </head>
  <body>
    <article>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </article>
  </body>

这个小例子的结果是

49COYFYL0JT)TNL@[2_O$45.png

这个例子与上一篇文章的例子极为相似，都是300*300的盒子里，都是有几个盒子，不同的可能就是这次只有8个盒子，而上一次有9个盒子吧。还有什么不同吗？我们看一下一号小盒子，它是不是多占了一个小格子，难怪没有了9号小盒子。

那我们来看一下是什么属性导致的吧。

grid-row 属性是一种 grid-row-start (en-US) 和 grid-row-end (en-US) 的缩写（shorthand）形式，它定义了网格单元与网格行（row）相关的尺寸和位置，可以通过在网格布局中的基线（line），跨度（span），或者什么也不做（自动），从而指定 grid area 的行起始与行结束。

如果指定了两个值，那么斜杠号前的值就被指定为 grid-row-start，斜杠后面的值就被指定为 grid-row-end 的值。

它是以下属性的简写属性：

grid-row-start
grid-row-end

我们来看看这个属性的语法格式。

grid-row: grid-row-start / grid-row-end;

其中grid-row-start代表着从哪行开始显示项目；grid-row-end代表着在哪条行线上停止显示项目，或者横跨多少行。

需要注意的是：

IE11 不支持网格单元的自动布置。除非显式地注释 -ms-grid-column 和 -ms-grid-row，否则所有单元都会在网格的第一行/列结束。

推荐学习：css视频教程

以上是css如何设置指定网格的大小和位置的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

8648

Java教程

1792

CakePHP 教程

1733

Laravel 教程

1583

PHP教程

1455

显示更多

Related knowledge

什么是AutoPrefixer，它如何工作？ Jul 02, 2025 am 01:15 AM

Autoprefixer是一个根据目标浏览器范围自动为CSS属性添加厂商前缀的工具。1.它解决了手动维护前缀易出错的问题；2.通过PostCSS插件形式工作，解析CSS、分析需加前缀的属性、依配置生成代码；3.使用步骤包括安装插件、设置browserslist、在构建流程中启用；4.注意事项有不手动加前缀、保持配置更新、非所有属性都加前缀、建议配合预处理器使用。

CSS教程，用于创建加载旋转器和动画 Jul 07, 2025 am 12:07 AM

创建CSS加载旋转器的方法有三种：1.使用边框的基本旋转器，通过HTML和CSS实现简单动画；2.使用多个点的自定义旋转器，通过不同延迟时间实现跳动效果；3.在按钮中添加旋转器，通过JavaScript切换类来显示加载状态。每种方法都强调了设计细节如颜色、大小、可访问性和性能优化的重要性，以提升用户体验。

欧洲虚拟币交易平台排行榜2025年最新榜单TOP10盘点（最近更新） Jul 11, 2025 pm 08:57 PM

2025年欧洲十大虚拟货币交易平台包括Binance、OKX、Coinbase等，依据合规性、安全性、费用、资产种类和用户体验评选。1. Binance：全球交易量最大，费率低，已获多国牌照；2. OKX：产品全面，技术强，已在法国注册；3. Coinbase：合规安全，适合初学者，在多国获许可；4. Gate.io：历史悠久，安全性高，在欧洲多国注册；5. Bitstamp：成立早，合规性强，受卢森堡监管；6. eToro：支持社交交易，多元化投资，受CySEC监管；7. Bitpanda：界

将CSS和JavaScript与HTML5结构有效整合。 Jul 12, 2025 am 03:01 AM

HTML5、CSS和JavaScript应通过语义化标签、合理加载顺序与解耦设计高效结合。1.使用HTML5语义化标签如、提升结构清晰度与可维护性，利于SEO和无障碍访问；2.CSS应置于中，使用外部文件并按模块拆分，避免内联样式与延迟加载问题；3.JavaScript推荐放在前引入，使用defer或async异步加载以避免阻塞渲染；4.减少三者间强依赖，通过data-*属性驱动行为、类名控制状态，统一命名规范提升协作效率。这些方法能有效优化页面性能与团队协作。

JavaScript时间对象，某人构建了一个eactexe，在Google Chrome上更快的网站等等 Jul 08, 2025 pm 02:27 PM

JavaScript开发者们，大家好！欢迎阅读本周的JavaScript新闻！本周我们将重点关注：Oracle与Deno的商标纠纷、新的JavaScript时间对象获得浏览器支持、GoogleChrome的更新以及一些强大的开发者工具。让我们开始吧！Oracle与Deno的商标之争Oracle试图注册“JavaScript”商标的举动引发争议。Node.js和Deno的创建者RyanDahl已提交请愿书，要求取消该商标，他认为JavaScript是一个开放标准，不应由Oracle

造型与CSS不同访问的链接 Jul 11, 2025 am 03:26 AM

设置访问过链接的样式能提升用户体验，尤其在内容密集型网站中帮助用户更好导航。1.使用CSS的:visited伪类可定义已访问链接样式，如颜色变化；2.注意浏览器出于隐私限制仅允许修改部分属性；3.颜色选择应与整体风格协调，避免突兀；4.移动端可能不显示该效果，建议结合其他视觉提示如icon辅助标识。

显示：内联，显示：块和显示：内联块之间有什么区别？ Jul 11, 2025 am 03:25 AM

Themaindifferencesbetweendisplay:inline,block,andinline-blockinHTML/CSSarelayoutbehavior,spaceusage,andstylingcontrol.1.Inlineelementsflowwithtext,don’tstartonnewlines,ignorewidth/height,andonlyapplyhorizontalpadding/margins—idealforinlinetextstyling

什么是CSS，它代表什么？ Jul 03, 2025 am 01:48 AM

CSS，orcascadingstylesheets，isthepartofwevelvermentThatControlsawebpage’svisualAppearance，包括colors，fonts，fonts，spacing，and spacing and layout

See all articles

css如何设置指定网格的大小和位置

热AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题