vgroup hgroup用法

vgroup 和 hgroup 是 HTML5 中用于内容分组的两个语义元素，它们并不是标准HTML的一部分，而是由某些CSS框架或者CSS预处理器如Sass等引入的概念。它们主要用于网页布局和设计，帮助开发者更好地管理和组织页面结构。

1. **vgroup (垂直分组)**: 这个概念并不常见于标准HTML，但在一些CSS网格布局中，它可以帮助你在一行内对元素进行垂直分组，比如将一系列相关的元素放在一起，方便调整样式和对齐。

<div class="vgroup">
   <div>元素1</div>
   <div>元素2</div>
   <div>元素3</div>
</div>

在CSS中，你可以通过设置`.vgroup`的`display`属性为`inline-block`或`grid`来实现垂直排列。

2. **hgroup (水平分组)**: 它是为了解决文章标题和副标题等内容在行内的水平排布而创建的，但同样不是标准HTML标签。通常情况下，浏览器不会直接支持，需要借助CSS来模拟。

<hgroup>
   <h1>主标题</h1>
   <h2>副标题</h2>
</hgroup>

在CSS中，可以结合flexbox或grid来控制这两个标题的水平位置。

请注意，由于HTML5并未广泛采用vgroup和hgroup，现代web设计更倾向于使用语义化的`<header>`、`<section>`、`<article>`等元素，以及CSS Grid或Flexbox进行布局。如果想要实现类似的功能，建议查阅相应的CSS库或工具文档。