CSS部分

作者: 醉破方知酒有权 | 来源:发表于2019-02-16 13:53 被阅读23次

多个class:

css中允许多个class：
<h1 class="green bold"> ... </h1>。

选择器：

Chaining Selectors：

举例：如果同时有一个p元素和一个h1元素下都有一个class = uppercase，那么可以通过在类名前添加它的父类来加以区分：
注意：两个元素之间没有空格。(类似的，background-image: url(图片地址)，url和后面的括号之间也不能有空格）

h1.special {

}

嵌套元素：

<ul class='main-list'>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>

想要设置<li> ... </li> 的css样式，可以通过嵌套元素的设置方法设置：

.main-list li {

}

一次选中多个选择器，并进行css格式化：

h1 {
  font-family: Georgia;
}

.menu {
  font-family: Georgia;
}

同时选中：

h1, 
.menu {
  font-family: Georgia;
}

通过用逗号分隔.h1和.menu，这两个类都会被相应的css格式修饰。

CSS 视觉规则：

CSS declarations are structured into property and value pairs.
CSS语句都是属性和值相对应的结构。
font-family定义了元素的字体。
font-size 控制文字显示的大小。
font-weight 定义文字的粗细程度。
text-align属性控制文字的对齐方式，可以取的分别为：left, right, center。
文字可以有两种颜色属性：前景色——color和背景色——background-color。color控制文字的颜色，background-color控制文字的背景色。
CSS中可以用opacity属性来令某个元素透明。
CSS中也可以通过 background-image 属性来设置某个元素的背景为一张图片。

盒模型：

border属性：

除了颜色、边框样式、边框大小之外，还可以调节边框的圆角大小，单位也是px：

div.container {
  height: 60px;
  width: 60px;
  border: 3px solid rgb(22, 77, 100);
  border-radius: 100%;
}

padding属性：

可以分别声明padding-top、padding-right、padding-bottom以及padding-left的值。
同时也可以直接声明padding: 3px 4px 5 px 6px，顺序分别是上、右、下、左。
使用上面这种写法时，所有边的padding数值都必须写明。
不过，如果上下、左右的padding值是相等的，也可以写作：
padding: 5px 10px，这代表上下的padding都是5px，而左右的padding都是10px。

margin属性：

margin和padding类似，也有margin-top、margin-right、margin-bottom、margin-left。
同样可以写作
margin: 10px 20px 10px 2opx;或者margin: 10px 20px;，表示上下边距为10px，左右边距为20px。
margin的叠加有一点特殊：
水平方向的叠加就是简单的数字叠加。例如，如果左边盒子margin-right = 10px;，而右边盒子的margin-left = 20px;，那么这两个盒子放置在一起时，他们交界处的margin= 10 + 20 = 30px;。
而竖直方向的情况则有所不同，对于叠放的两个盒子，如果上面盒子的margin-bottom = 30px;，而下面盒子的margin-left = 20px;，则交界处的margin值为：30px。
利用margin实现居中对齐：
首先需要父元素有固定的width或者height。比如如果想要让div1实现横向居中对齐，首先应该设置其父元素div0的width= 400px，然后在css文件中设置div1的margin值为：margin: 0 auto;

overflow:

被父元素包裹着的子元素可能会占据空间过大而超过父元素的容纳范围，此时可以通过设置overflow的值来进行调整。
overflow的值可以为：scroll、hide、display。

display属性：

可以利用display属性来设置HTML元素的显示方式。
可以设置为：none, block, inline-block, inline。
none表示元素不显示；
block表示显示为块级元素；
inline表示显示为行内元素；
inline-block表示显示为行内块级元素。
块级元素和行内块级元素可以设置width height属性，
而行内元素则不能。
注：一旦给元素加上absolute或float就相当于给元素加上了display:block;。

position属性:

static
fixed
relative
absolute

1. static属性：
static是html元素的默认position值，也就是按照正常的文档流排列。
2. fixed属性：
fixed的效果参见各种定在网页上的广告。
3. relative属性：
relative的元素是相对于自己的default position来定位的。

<div class="first">第一块</div>
<div class="second">第二块</div>
<div class="third">第三块</div>

<!--css文件-->
.first {
  background-color: red;
  color: white;
}

.second {
  background-color: green;
  color: white;
}

.third {
  background-color: blue;
  color: white;
}

3.1 默认情况下：

默认的HTML元素布局
3.2 当设置第二块div的position属性为relative时：

.second {
  background-color: green;
  position: relative; //relative定位
  color: white;
}

可以看到与默认情况并无区别，
这是因为没有指定目标HTML元素相对其default position的偏移量。

只指定relative，未指定偏移量时，并无变化
3.3 指定偏移量之后：

.second {
  background-color: green;
  position: relative;
  color: white;
  left: 20px;
  top: 20px;
}

相对于其default position向下向左各偏移20px
3.4 添加margin/padding值：
虽然单纯地偏移并不会影响下面的第三块div，但是如果设置第二块div的padding或margin值，还是会影响到第三块div在文档中的位置。

.second {
  background-color: green;
  position: relative;
  color: white;
  margin-bottom: 40px; //增加底部40px的margin，观察div3的位置变化
  padding-bottom: 10px; //增加底部10px的padding，观察div3的位置变化
  left: 20px;
  top: 20px;
}

添加margin/padding后可以看到div3被“挤下去”了
4. absolute定位：
4.1 只设置position：absolute而不设置偏移量：

.first {
  background-color: red;
  color: white;
  height: 40px; //为方便观察，把div1的高度设为40px；
}

.second {
  background-color: green;
  color: white;
  position: absolute; //设置div2的position: absolute;

}

.third {
  background-color: blue;
  color: white;
  height: 40px;  //为方便观察，把div3的高度设为40px；
}

结果：

div2此时的父元素是body元素，body元素默认是relative布局的。当只设置position: absolute而不指定偏移量的时候，div2会依照default position来定位其布局，但不会占用HTML文档的文档流空间，所以可以看到div3从下面上来了。
4.2 设置偏移量：
4.2.1只设置left偏移量：

.second {
  background-color: green;
  color: white;
  position: absolute;
  left: 40px; // 只设置left偏移40px
}

结果：

[可以看到，div2向右偏移了40px，这样似乎和relative定位并无不同，但区别在设置top偏移量之后就一目了然了]
4.2.2同时设置left偏移量和top偏移量：

.second {
  background-color: green;
  color: white;
  position: absolute;
  left: 40px;
  top: 10px; //同时设置left偏移量和top偏移量
}

结果：

同时设置left偏移40px和top10px，可以看到top指示的向下偏移是以body元素为参照的。这正是因为body元素是div2的第一个relative布局的父元素。
事实上，absolute属性就是要配合relative属性使用才能更好发挥作用的：
例如，想要在div3的任意位置显示一个“发送”按钮：

<div class="first">第一块</div>
<div class="second">第二块</div>
<div class="third">
第三块
<input type="button" class="send-button" value= "发送">
</div>

.third {
  background-color: blue;
  color: white;
  height: 40px;
  position: relative; //relative定位
}

.send-button {
  position: absolute; //absolute定位
}

未设置发送按钮的偏移量之前发送按钮所处的位置
设置“发送按钮”的偏移量：

.send-button {
  position: absolute;
  top: 20px;
  left: 80px;
}

结果：

可以看到，“发送按钮”相对于div3的左上角向右偏移了80px，向下偏移了20px

float：

通过float属性，可以使HTML元素脱离正常的文档流，竖直方向上将不再占用文档的空间，不过水平方向上不变。
比如可以利用这一特性，让序列横向排列:
HTML文件：

<div class="backPanel">
  <li>
    <ul class="floated">语文</ul>
    <ul class="floated">英语</ul>
    <ul class="floated">数学</ul>
  </li>
</div>

CSS文件：

.backPanel {
  background-color: gray;
  padding: 10px;
}

默认情况下的结果：

未浮动的无序列表元素是竖向排列的

利用float属性来ul元素横向排列：

.backPanel {
  background-color: gray;
  padding: 10px;
}

li {
  list-style: none; //去掉了无序列表的小黑点
}

.floated {
  width: 29%;
  padding: 1%;
  margin: 1%;
  text-align: center; 
  background-color: white; //以上稍微调整了一下ul元素的样式
  float: left; // 设置ul元素向左浮动
}

结果：

可以看到，设置float之后，ul元素不再占用竖直方向上的空间，所以包着他们的父div也就包不住它们了

此时只需要设置一下backPanel的height即可：

.backPanel {
  background-color: gray;
  padding: 10px;
  height: 80px; //看起来是包住了，其实是铺在下面了
}

float属性的应用
float属性虽然在竖直方向上不占空间了，但不会脱离文档流：

<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>

  <li>
    <ul class="floated">语文</ul>
    <ul class="floated">英语</ul>
    <ul class="floated">数学</ul>
  </li>

li {
  list-style: none;
}

.floated {
  width: 29%;
  padding: 1%;
  margin: 1%;
  text-align: center;
  background-color: black;
  color: white;
  float: left;
}

比如现在ul元素都没有父元素包裹了，上面只有一个<p> </p>元素，float之后的ul元素并不会“飞到”文档顶端去：

ul元素没有脱离文档流，只是其高度会塌陷

颜色值(color)：

css中的color从类型上可以分为color (前景色)和background-color：

<h1>H1</h1>
h1 {
  color: white; //前景色
  background-color: black;  //背景色
}

效果：

白色为前景色，黑色为背景色
css中的color从表现方式上可以分为三种：

十六进制表示法；
rgb表示法（还可以拓展为rgba表示法，a表示alpha，指的是opacity——不透明度）；
hsl表示法（还可以拓展为hsla表示法，a同上）。

举例：

<div class="hex">hex</div>
<div class="rgb">rgb</div>
<div class="rgba">rgba</div>
<div class="hsl">hsl</div>
<div class="hsla">hsla</div>

.hex {
  background-color: #FFAA00;
  height: 80px;
  width: 80px;
}

.rgb{
  background-color: rgb(222, 22, 2);
  height: 80px;
  width: 80px;
}

.rgba {
  background-color: rgba(222, 22, 2, 0.2);
  height: 80px;
  width: 80px;
}

.hsl {
  background-color: hsl(180, 60%, 90%); //注意百分号
  height: 80px;
  width: 80px;
}

.hsla {
  background-color: hsla(180, 60%, 90%, 0.4); 
  height: 80px;
  width: 80px;
}

结果：

各种颜色表示法举例
附上各种能叫得名字来的颜色值：有名字的颜色值。

排版：

设置字体：

font-family: 字体名称;

设置字体权重：

font-weight: bold | normal;
也可以用数值来表示，数值的范围为[100, 900]且必须是100的整数倍。

400 is the default font-weight of most text.
700 signifies a bold font-weight.
300 signifies a light font-weight.

举例：

<span class="default">中</span>
<span class="bold">中</span>
<span class="light">中</span>

.default {
  font-weight: 400;
}

.bold{
  font-weight: 700;
}

.light{
    font-weight:300;
}

400: normal, 700: bold, 300: light

It's important to note that not all fonts can be assigned a numeric font-weight. You can look up the font you are using to see which font-weight values are available.

设置字体风格：

font-style: italic; ——斜体；

设置文字大小写：

text-transform: uppercase | lowercase;

设置文字对齐方式：

text-align: left | right | center;

设置行高：

Another property that we can set for text is line-height. This property modifies the leading of text.
The diagram beneath helps illustrate exactly what the terms "leading" and "line height" mean.

image.png

举例：

p {
  line-height: 1.4;
}

后备字体(fallback fonts):

h1 {
  font-family: "Garamond", "Times", serif;
}

以上CSS语句的意思是：

对网页上所有的<h1>元素优先使用 Garamond 字体；
如果Garamond 字体不存在，那么就用 Times 字体；
如果以上两种字体在目标客户端上都没有，那么就使用该客户端上存在的任意一种衬线字体(serif)。

注：
相对应地，也存在非衬线字体：sans-serif fonts;

CSS 网格(grid)：

创建网格：

.grid {
  width: 1080px;
  height: 500px;
  display: grid;
}

定义网格列`grid-template-columns：px | %;`

.grid {
  display: grid;
  width: 1000px;
  height: 500px;
  grid-template-columns: 100px 200px;
}

grid-template-columns: 100px 200px;的意思是：将此网格分为两列。
其中，第一列的width = 100px，第二列的width = 200px。
宽度的单位也可以不是px，可以用百分数表示：

.grid {
  display: grid;
  width: 1000px;
  grid-template-columns: 20% 50%;
}

上面grid的宽度是1000px，所以第一列的宽度是1000 * 20% = 200px；同理，第二列的宽度是500px。
也可以混用px和%：

.grid {
  border: 1px solid black; //给grid一个边框以更好地表现 其中的元素会超出grid的界限
  display: grid;
  width: 100px;
  grid-template-columns: 20px 40% 60px; // 也可以混用`px`和`%`
}

.item {
  background-color: gray;
}

这3列中，第一列width为20px，第二列为100 * 40% = 40px，第三列width为60px。
注意：也就是说，总宽度20 + 40 + 60 = 120px，超过了100px，元素会超出grid的界限。

示例

定义网格行`grid-template-rows: px | %;`

与定义grid columns是类似的:

<div class="grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
  <div class="item">J</div>
  <div class="item">K</div>
</div>

.grid {
  border: 1px solid black;
  display: grid;
  width: 1000x;
  height: 400px;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-columns: 25% 25% 25% 25%;
}

.item {
  background-color: gray;
  margin: 2px;
  text-align: center;
}

结果：

grid-template-rows: 25% 25% 25% 25%;表示把grid分成4行，每一行占其height的25%。

一句话定义grid的行和列：

<div class="grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
  <div class="item">J</div>
  <div class="item">K</div>
</div>

.grid {
  display: grid;
  width: 600px;
  height: 500px;
  grid-template: 200px 300px / 20% 10% 70%;  //斜杠前面定义“行”， 后面定义“列”
//200px 300px两行，一行高200px，第二行高300px；
//20% 10% 70% 表示3列，第一列宽500 * 20% = 50px；第二、三列类似。
}

.item {
  background-color: gray;
  margin: 2px;
  text-align: center;
}

结果：

grid-template: 200px 300px / 20% 10% 70%; 一句话定义grid的行和列

fraction (fr):

通过单位fr，我们可以将行和列定义为对grid的length和width的划分——作用类似于%，但是用%是有超出父容器边界的风险的，而用fr则不用担心，因为浏览器会自动对grid进行划分。

<div class="grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
</div>

.grid {
  display: grid;
  float: left;
  margin-right: 10px;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr; //fr的作用
}

可以看到第一行的行高是第二、三行的行高之和(1 : 1)；第二列的列宽是第一列或者第三列的列宽的3倍 (1 : 3)。
这样做的优点就是相对于%不用进行繁琐的计算，且可以确保grid中的item不会超出边界。
即使是横向只用fr定义了3行，而实际的数据有5行，也依然不会造成item出界。
下面做一个对比：

<div class="grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
  <div class="item">J</div>
  <div class="item">K</div>
  <div class="item">L</div>
  <div class="item">M</div>
  <div class="item">N</div>
  <div class="item">O</div>
  <div class="item">P</div>
  <div class="item">Q</div>
</div>

<div class="next-grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
</div>

.grid {
  display: grid;
   float: left;
  margin-right: 10px;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;
}

.next-grid {
  float: left;
  display: grid;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;
}

.item {
  background-color: gray;
  text-align: center;
  
}

一图胜千言。可以看到第1行的height依然是第二、三行之和，不过浏览器自动为多出来的行留出了空间，并在保持第一行和第二、三行的比例不变的情况下，压缩了它们的height。

repeat()函数：

如果行高或列宽相等，可以用repeat()函数来简化语句：

.grid {
  display: grid;
   float: left;
  margin-right: 10px;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template-columns: repeat(4, 1fr); //竖直方向等宽的4列
  grid-template-rows: repeat(3, 1fr); //水平方向等高的3行

}

.item {
  background-color: gray;
  text-align: center; 
}

结果：

grid-template-columns: repeat(4, 1fr); —— 竖直方向等宽的4列 grid-template-rows: repeat(3, 1fr); —— 水平方向等高的3行
注：
repeat()后面的fr并不是只能有一个：



## minmax函数：
假设有3列，第一列和第三列的列宽都是100px，当浏览器的宽度变化时，想要让中间的那一列的列宽在100px~500px之间变化，则可以设置：

.grid {
display: grid;
grid-template-columns: 100px minmax(100px, 500px) 100px;
}

.grid {
  display: grid;
  float: left;
  margin-right: 10px;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template-rows: repeat(4, 1fr 2fr);  //一共8行，(1fr + 2fr)的样式重复4次。 
  grid-template-columns: repeat(3, 1fr 2fr);
}

结果：

repeat()函数的第二个参数是可以接收多个值的

设置行间距、列间距，同时设置行、列间距：

.grid {
  display: grid; 
  width: 320px; 
  grid-template-columns: repeat(3, 1fr);  //等宽的3列
  grid-column-gap: 10px; //列间距
}

行间距同理：
grid-row-gap: 10px;
同时设置行、列间距：
grid-gap: 20px 10px; —— 一句话，分别设置行间距为20px，列间距为10px。
注：

It is important to note that grid-gap does not add space at the beginning or end of the grid.

这一简写形式并不需要/，如果只提供了一个值，比如：grid-gap: 10px;，则相当于grid-gap: 10px 10px;。

以上都是针对grid本身的，以下语法则是针对grid的item的：

设置item跨行 `grid-row-start: 5; grid-row-end: 7;`:

.grid {
  display: grid;
  border: 2px blue solid;
  height: 500px;
  width: 500px;
  grid-template: repeat(4, 1fr 2fr) / repeat(4, 3fr 2fr);
  grid-gap: 5px;
}

.a {
  grid-row-start: 5; //设置这个item的起始行是第5行
  grid-row-end: 7; //设置这个item在跨第5、6行，不跨第7行——终止于第7行之前
}

.box {
  background-color: beige;
  color: black;
  border-radius: 5px;
  border: 2px dodgerblue solid;
}

简写形式：

.a {
  grid-row: 5 / 7;
}

同理，

设置item跨列：

.item {
  grid-column-start: 4;
  grid-column-end: 6;
}

同样，也可以写作：

.item {
  grid-column: 4 /6;
}

利用`span`属性来避免“误差”：

span可以明确地指出希望行或列跨越的距离：
比如，如果想要row从第4行开始，占两行，就可以直接写作：

.item {
  grid-row: 4 / span 6;
}

不用grid-row的简写形式，也可以写作：

.item {
  grid-row-start: 4;
  grid-row-end: span 2;
}

当然，span也可以用在grid-row-start之后，浏览器会自动为我们计算出结果：

.b {
  grid-row-start: span 3;
  grid-row-end: 3;
}

结果：

span的用法：B item占三行，并且是从第3行末尾往前数
对于grid-column，span的用法是完全相同的，不再赘述。

网格区域(grid area)：

可以用一句话声明一个item占grid的多少行、列，并限定它在grid中的具体位置。

.b {
  grid-area: 2 / 3 / span 2 / span 4;
}

结果：

2表示从第2行开始，3表示从第3列开始，span 2表示从跨两行， span 4表示跨4列

CSS网格进阶属性：

Grid Template Areas:

利用这个属性，可以先做出一个模板，然后让各个元素分别去“认领”他们所占的行和列。

<div class="container">
  <header>Welcome!</header>
  <nav>Links!</nav>
  <section class="info">Info!</section>
  <section class="services">Services!</section>
  <footer>Contact us!</footer>
</div>

比如container下面有5个板块:

.container {
  display: grid;
  max-width: 900px;
  position: relative;
  margin: auto;
  grid-template-areas: "head head"
                       "nav nav" 
                       "info services"
                       "footer footer";
  grid-template-rows: 300px 120px 800px 120px;
  grid-template-columns: 1fr 3fr; 
}

grid-template-areas示意图
先用 grid-template-areas属性“打好格子",然后各部分元素再利用grid-area属性将自己“代入”打好的格子中：

header {
  grid-area: head;
} 

nav {
  grid-area: nav;
} 

.info {
  grid-area: info;
} 

.services {
  grid-area: services;
}

footer {
  grid-area: footer;
}

注：
图中的grid是四行两列的，当header 和 header并列时，表示header占两列，此时header将占据整行，即使存在grid gap，依然不会将两个header分隔开。虚线只是为了便于理解，实际并不存在。

justify-items：

设置grid元素在每个格子中水平方向上的对齐方式。
justify-items属性可以接收的值为：

start
end
end
strench

注：这个属性是container中的，而不是每个item的。

align-items:

设置grid元素在每个格子中竖直方向上的对齐方式：
同样可以接收以下值：

start
end
end
strench

注：这个属性是container中的，而不是每个item的。

justify-content：

设置整个grid在其父容器中，水平方向上的对齐方式：
可以取的值为：

属性取值	效果
start	aligns the grid to the left side of the grid container
end	aligns the grid to the right side of the grid container
center	centers the grid horizontally in the grid container
stretch	stretches the grid items to increase the size of the grid to expand horizontally across the container
space-around	includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element
space-between	includes an equal amount of space between grid items and no space at either end
space-evenly	places an even amount of space between grid items and at either end

main {
  display: grid;
  width: 1000px;
  grid-template-columns: 300px 300px;
  grid-template-areas: "left right"; 
  justify-content: center;
}

设置整个grid在其父容器中，水平方向上的对齐方式

align-content：

同理，利用align-content属性可以设置整个grid在其父容器中，竖直方向上的对齐方式。
原理均与justify-content属性相似，不再赘述。

Justify Self and Align Self:

利用justify-self、align-self属性，可以分别设置grid的每个格子中，具体某个item在水平、竖直方向上的对齐方式。

属性可以取的四种值	效果
start	positions grid items on the left side/top of the grid area
end	positions grid items on the right side/bottom of the grid area
center	positions grid items on the center of the grid area
stretch	positions grid items to fill the grid area (default)