网格布局··

最新推荐文章于 2024-08-14 12:22:11 发布
最新推荐文章于 2024-08-14 12:22:11 发布
阅读量80 收藏
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56037622/article/details/129065434
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

      /* CSS reset */

*,

*::after,

*::before {

  box-sizing: inherit;

  margin: 0;

  padding: 0;

}

body {

  box-sizing: border-box;

  position: relative;

}

html {

  font-size: 62.5%;

}

/* Typography --------------------------------------------*/

body {

  font-family: 'Helvetica Neue', sans-serif;

  font-size: 2rem;

  text-align: center;

}

.heading {

  margin-bottom: 3rem;

}

.body-text {

  font-size: 1.6rem;

  line-height: 2.5rem;

  margin: 0 auto;

  width: 70%;

}

.footer-text {

  color: #fff;

  font-size: 1.5rem;

}

/* Header --------------------------------------------*/

.header {

  margin: 0 auto;

  padding: 3rem 0;

  width: 65%;

}

/* Footer --------------------------------------------*/

.footer {

  background-color: #333;

   margin-top: 3rem;

  padding: 2rem 0;

  width: 100%;

}

/* Grids --------------------------------------------*/

.container {

  display: grid;

  grid-gap: 2rem;

  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: repeat(12, 150px);

  margin: 0 auto;

  max-width: 90%;

  padding: 3rem 0;

}

/* Grid images --------------------------------------------*/

.img {

  border-radius: 1rem;

  height: 100%;

  width: 100%;

  object-fit: cover;

}

/* Grid items --------------------------------------------*/

.item-4 {

  grid-row: 2/5;

}

.item-5 {

  grid-row: 2/6;

}

.item-6 {

  grid-row: 2/4;

}

.item-7 {

  grid-row: 5/6;

}

.item-8 {

  grid-row: 4/6;

}

.item-9 {

  grid-row: 6/11;

}

.item-10 {

  grid-row: 6/7;

}

.item-11 {

  grid-row: 6/9;

}

.item-12 {

  grid-row: 7/12;

}

.item-13 {

  grid-row: 9/13;

}

.item-14 {

  grid-row: 11/13;

}

      </style>

</head>

<body>

  <header class="header">

    <h1 class="heading">Masonry Image Layout</h1>

    <p class="body-text">

      CSS grids were used to create this masonry layout of images, no Javascript was used. This is the best view on the large screen at this time.

    </p>

  </header>

  <main class="container">

    <div class="item-1">

      <img class="img" src="https://picsum.photos/500/300" alt="">

    </div>

    <div class="item-2">

      <img class="img" src="https://picsum.photos/500/301" alt="">

    </div>

    <div class="item-3">

      <img class="img" src="https://picsum.photos/500/302" alt="">

    </div>

    <div class="item-4">

      <img class="img" src="https://picsum.photos/500/600" alt="">

    </div>

    <div class="item-5">

      <img class="img" src="https://picsum.photos/500/800" alt="">

    </div>

    <div class="item-6">

      <img class="img" src="https://picsum.photos/500/400" alt="">

    </div>

    <div class="item-7">

      <img class="img" src="https://picsum.photos/500/304" alt="">

    </div>

    <div class="item-8">

      <img class="img" src="https://picsum.photos/500/401" alt="">

    </div>

    <div class="item-9">

      <img class="img" src="https://picsum.photos/500/900" alt="">

    </div>

    <div class="item-10">

      <img class="img" src="https://picsum.photos/500/305" alt="">

    </div>

    <div class="item-11">

      <img class="img" src="https://picsum.photos/500/500" alt="">

    </div>

    <div class="item-12">

      <img class="img" src="https://picsum.photos/500/901" alt="">

    </div>

    <div class="item-13">

      <img class="img" src="https://picsum.photos/500/700" alt="">

    </div>

    <div class="item-14">

      <img class="img" src="https://picsum.photos/500/402" alt="">

    </div>

    <div class="item-15">

      <img class="img" src="https://picsum.photos/500/306" alt="">

    </div>

  </main>

  <footer class="footer">

    <p class="footer-text">Created by Madalena.design</p>

  </footer>

</body>

</html>

雯雯lili
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css网格布局
m0_70877859的博客
08-17 1066
*********************只能实现矩形的合并*********************************************grid 布局则是将容器划分成不同的“行”和“列”，产生单元格，让和指定“项目所在单元格”，可以看作是二维布局，space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。--以上代码中sectione为容器，div为项目（项目不包括p标签）-->如果一个m行n列的网格，需要m+1+n+1条线，m+1条横线，n+1条纵线。...
Javafx 网格布局
LJT_1314520的博客
06-17 943
目录网格布局 完整代码：运行效果为：注册页面案例制作 ：分析布局：分析控件：控件讲解 ：下拉框的使用 ： 完整代码：复选框的使用：效果图：完整代码 ：页面制作：布局设置：文本控件设置：输入框控件设置：单选框设置： 下拉框设置：复选框设置：按钮设置：控件与网格绑定： 将整个面板划分为若干个格子,每个格子的大小是一样的,每个格子中可以放置一个控件（布局）,类似于表格的方式。在网格布局 中放入控件的时候,还需要指定位置。 可以设置表格位置：Pos()方法是调用你要放在哪个位置上的 可以观察到每个控件之
网格布局 Grid
青蛙king的博客
12-16 5878
grid 布局将网页划分成一个个网格，可以任意组合不同的网格成“行和列”，可以定义这些网格的大小、位置、层次等关系，从而实现各种各样的布局。Grid 布局远比 Flex 布局强大。
css【详解】grid布局—— 网格布局（栅格布局）
热门推荐
朝阳39的博客
04-11 5万+
目录 gird布局 和 flex布局的区别 Grid 布局的基本术语 网格布局的使用方法 启用网格布局display: grid 划分列grid-template-columns 绝对值 px 百分比值 % 比例值 fr auto值 minmax()函数值 repeat()函数值 划分行grid-template-rows 自动填充auto-fill 给网格线命名 [] 设置行/列的间距 指定区域 不属于任何区域的单元格，用.表示 多个单元格合并成一个区域 改...
Java网格布局
zoujiafu520的博客
06-17 2606
关于Java网格布局的编写
grid网格布局
qq_60893085的博客
02-13 2740
display:gride
CSS Grid网格布局
m0_65029152的博客
06-26 892
记录一下前端的grid布局，一个很有趣的布局方法；
7. CSS 网格布局
一名全栈开发工程师
05-29 1664
网格布局是一种二维布局系统，允许我们在水平和垂直两个方向上定义布局。它由网格容器（grid container）和网格项目（grid item）组成。网格布局非常灵活，适合创建复杂和响应式的网页设计。
html网格布局
yjnlovepy的博客
01-28 1438
html网格布局
3.4网格布局
m0_64197831的博客
11-13 288
有些应用要求控件很整齐地排成若干行和若干列，当然利用线性布局嵌套是可以实现的，但是太繁琐了，我们可以采用网格布局来实现，就比较简单。
Android RecyclerView网格布局（支持多种分割线）详解(2)
08-31
本篇文章将深入探讨如何在RecyclerView中实现网格布局，并支持多种类型的分割线，包括颜色分割线和图片分割线。 首先，我们关注的焦点是`RecyclerView.Adapter`，这是RecyclerView的核心部分，负责为每个数据项创建...
Qt网格布局应用.zip
06-12
在本文中，我们将深入探讨Qt框架中的网格布局（Grid Layout）及其在实际应用中的使用方法。Qt是一个跨平台的应用程序开发框架，广泛用于创建桌面、移动和嵌入式应用程序。网格布局是Qt Widgets模块中的一种布局管理...
网格布局
02-20
网格布局是现代网页和应用程序设计中的一个重要概念，它允许开发者以一种灵活且可自定义的方式来组织页面内容。在HTML中，CSS（层叠样式表）的Grid Layout模块提供了这种功能，使得网页设计师能够创建二维布局，其中...
CSS Grid 网格布局全解析
09-24
《CSS Grid 网格布局全解析》 CSS Grid（网格布局）是现代网页设计中一个强大的工具，它使得创建复杂、响应式的二维布局变得轻松简单。Grid布局摒弃了传统布局模式的限制，让我们可以自由地定义网页的行和列，以及...
Vue中的高频内置指令：v-text、v-html、v-cloak、v-once、v-pre
PleaSure乐事的博客
08-11 932
Vue——v-text、v-html、v-cloak、v-once、v-pre指令
前端（HTML + CSS）小兔鲜儿项目（仿）
li3123537691的博客
08-09 668
这是一个简单的商城网站，代码部分为HTML + CSS 和少量JS代码。
css实现水滴效果图
yinge0508的博客
08-12 1118
【代码】css实现水滴效果图。
CSS 基础
jht_520的博客
08-10 326
比如，增加内边距可以使元素内部的内容与边框之间有更多的空间，而调整外边距可以控制元素与周围元素的距离。通过使用媒体查询，我们可以针对不同的屏幕宽度设置不同的 CSS 规则。例如，在小屏幕设备上，可以隐藏一些不必要的元素，或者改变导航栏的样式，以提供更好的用户体验。它可以决定网页中文字的字体、大小、颜色，还能设置元素的背景颜色、边框样式等。比如，通过 CSS 我们可以将网页的标题设置为醒目的大字号、独特的字体和鲜艳的颜色，使其更加吸引用户的注意力。CSS，即层叠样式表，是网页设计中不可或缺的一部分。
【playwright篇】CSS 选择器 详细用法
最新发布
qadnkz的专栏
08-14 671
在 Playwright 中，CSS 选择器是非常重要的，因为它们用于定位页面上的元素。CSS 选择器允许您通过 HTML 元素的属性、类名、ID 等来定位元素。以下是 CSS 选择器的一些基本用法和示例。
Android网格布局
09-08
Android网格布局是一种用于在应用中将控件整齐排列成若干行和若干列的布局方式。相比于线性布局的嵌套，网格布局更加简单方便。 在Android中，我们可以使用GridView来实现网格布局。GridView提供了一些常用的属性，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值