首页 > 其他分享 >css实现子元素整体居中,最后一行靠左。grid布局

css实现子元素整体居中,最后一行靠左。grid布局

时间:2024-01-29 16:57:01浏览次数:28  
标签:居中 靠左 100px grid container css

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div> 
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>


.container{
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, 100px);
  justify-content: center;  //此行代码用于居中
}
.container .item{
    width: 100px;
    height; 100px;
    background-color: #FFA500;
}

标签:居中,靠左,100px,grid,container,css
From: https://www.cnblogs.com/huihuihero/p/17994865

相关文章

  • 界面控件DevExpress ASP.NET Data Grid组件 - 可快速处理各类型数据!(二)
    由DevExpress开发的快速且功能完整的ASP.NETWebForms的DataGrid组件,从全面的数据塑造和数据过滤选项到十多个集成数据编辑器,该套件提供了帮助用户构建极佳数据所需的一些,没有限制!在上文中(点击这里回顾>>),我们为大家介绍了DevExpressASP.NETWebForms数据网格组件的性能、过滤......
  • css背景图片实现object-fit的效果
     object-fit是一个用于控制替换元素(如<img>或<video>)内容在其容器内布局和缩放的CSS属性。它的作用是调整替换元素的尺寸和位置,使其适应容器,并保持其纵横比例。然而,object-fit属性本身并不直接适用于背景图片。如果你想在背景图片上应用object-fit效果,可以使用background-size......
  • css其他
    1、   css水平、垂直居中水平居中1)行内元素:text-align:center2)块级元素:margin:0auto3)position:absolute+left:50%+transform:translateX(-50%)4)display:flexjustify-content:center垂直居中1)设置line-height等于he......
  • 头像和消息组件css实现思路
    修改后:实现代码(可以用于组装头像和消息):<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>D......
  • WPF,ListView中的Item自定义靠左还是靠右
    Item中有属性来决定是左还是右,难点在于如何将ItemTemplate扩充占满整个宽度,这样子当界面缩放的时候,Item靠左或靠右也能随着移动,其实主要是下面的代码,设置ListViewItem的HorizontalContentAlignment属性为Stretch,铺满整个宽度,示例代码如下:<ListViewx:Name="LvmqttMsg"Ba......
  • 封装Excel读取,导出(实体类集合List、DataTable、DataGridView、实体类集合和DataTable
     1、引入使用 #region读取excel///<summary>///根据Excel和Sheet返回DataTable///</summary>///<paramname="filePath">Excel文件地址</param>///<paramname="sheetIndex">She......
  • css 的三种元素
    css中包含3中元素:块状元素、内联元素(又叫行内元素)和内联块状元素。一、常用的块级元素(block):<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>主要特点:display:block1、每个块级元素独占一行。2、元素的高度、宽度、行高以及顶和底边......
  • 在WPF应用中实现DataGrid的分组显示,以及嵌套明细展示效果
    我在前面随笔《在Winform系统开发中,对表格列表中的内容进行分组展示》,介绍了Winform程序中对表格内容进行了分组的展示,在WPF应用中,同样也可以对表格的内容进行分组展示,不过处理方式和Winform有所差异,本篇随笔同样基于SqlSugar开发框架的基础上,实现在WPF应用中实现DataGrid的分组显......
  • 使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv
    使用命令行方式搭建uni-app+Vue3+Typescript+Pinia+Vite+TailwindCSS+uv-ui开发脚手架项目代码以上传至码云,项目地址:gitee.com/breezefaith…目录一、前言近日心血来潮想做一个开源项目,目标是做一款可以适配多端、功能完备的模板工程,包含后台管理系统和前台......
  • 参照DefenseGrid在Unity中实现合理的塔防寻路机制
    前言在一款TD游戏中,最重要的单位就两大类:防御塔(Tower)和敌人单位(Enemy)。在处理敌人单位的AI行为时,最基本也是最重要的就是自动寻路。在各式TD游戏中,防御塔的攻击方式以及敌人单位的Buff机制往往是能做出差异化的地方;而在寻路问题上,几乎是没有差异的,面对的都是同一套问题模型。以......