Detailed explanation of Grid layout and Flex layout of display in CSS3

Gird layout has some similarities with Flex layout, both of which divide the internal items of the container.

• Flex layout is an axis layout, which can only specify the position of items on the axis, and can be regarded as a one-dimensional layout.
• The Grid layout divides the container into rows and columns to generate cells, and then specifies the cells where the items are located. It can be regarded as a two-dimensional layout.
• The parent element becomes the container , and the multiple child elements inside the parent element become items

flex flexible layout (container attribute)

Flex is the abbreviation of Flexible Box (abbreviated as: elastic box), any container can be set to flex layout.

Flex is called a container (felx container), and all child elements automatically become members of the container.

1. flex-direction determines the direction of the main axis (i.e. the direction in which the items are arranged)
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

flex-direction attribute: determines the direction of the main axis (that is, the direction in which the items are arranged)

• row (default): the main axis is horizontal, with the starting point at the left end;

.content-box {
       display: flex;
       flex-direction: row;
   } 

row-reverse: the main axis is horizontal, with the starting point at the right end;

.content-box {
       display: flex;
       flex-direction: row;
   } 

Column: The vertical direction of the main axis, starting at the upper edge;

.content-box {
       display: flex;
       flex-direction: column;
   } 

column-reserve: The main axis is vertical, with the starting point at the bottom edge.

.content-box {
       display: flex;
       flex-direction:column-reverse;
   } 

flex-wrap attribute: define line breaks

By default, they are all aligned on one axis. The flex-wrap attribute definition is that if one axis cannot fit, the corresponding attribute is used to wrap the line.

nowrap (default): no line break.

.content-box {
       display: flex;
      flex-wrap: nowrap;
   } 

wrap: wrap, with the first line at the top.

.content-box 
{       
display: flex;      
flex-wrap: wrap;   
}

wrap-reverse: Wrap lines, with the first line at the bottom.

  .content-box 
{    
display: flex;   
flex-wrap: wrap-reverse;  
}

flex-flow attribute: abbreviation of flex-direction and flex-wrap, default row nowrap

The flex-flow property is a shorthand form of the flex-direction property and the flex-wrap property, and the default value is row nowrap.

.content-box
 {   
  flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content property: defines how items are aligned on the main axis.

The justify-content property defines the alignment on the main axis.

flex-start (default): left-aligned.

 .content-box {
       display: flex;
       justify-content: flex-start;
   }

flex-end: right aligned.

.content-box {
       display: flex;
       justify-content: flex-end;
   }

center: Center alignment.

.content-box {
       display: flex;
       justify-content: center;
   }

space-between: Align both ends and leave equal space between items.

 .content-box {
       display: flex;
       justify-content: space-between;
   }

space-around: Equal spacing on both sides, the spacing on both sides of each item is equal, and the spacing between items is twice as large as the spacing between items and borders.

 .content-box {
       display: flex;
       justify-content: space-around;
   }

space-evenly: The spacing between items is equal.

Property: Defines the alignment on the cross axis

stretch (default): If the item has no height set or is set to auto, it will occupy the entire height of the container.

  .content-box {
       display: flex;
       align-items: stretch;
   }

flex-start: Align to the starting point.

 .content-box {
       display: flex;
       align-items:flex-start;
   }

flex-end: Align the end point.

 .content-box {
       display: flex;
       align-items: flex-end;
   }

center: center point alignment.

 .content-box {
       display: flex;
       align-items: center;
   }

baseline: The baseline alignment of the first line of text in the project.

 .content-box {
       display: flex;
       align-items: baseline;
   }

align-content attribute: defines the alignment of multiple axes

If the project has only one axis, this property has no effect. So flex-wrap must be set in the properties.

stretch: (default value) the axis occupies the entire cross axis

  .content-box {
       display: flex;
       flex-wrap: wrap;
       align-content: stretch;
   }

flex-start: Align the starting point with the starting point of the cross axis

.content-box {
       display: flex;
       flex-wrap: wrap;
       align-content: flex-start;
   }

flex-end: end point alignment, aligned with the end point of the cross axis

 .content-box {
       display: flex;
       flex-wrap: wrap;
       align-content:flex-end;
   }

center: midpoint alignment, aligned with the midpoint of the cross axis

   .content-box {
       display: flex;
       flex-wrap: wrap;
       align-content: center;
   }

space-between: The axes are equally spaced, aligned with the ends of the cross axis, and the intervals between the axes are evenly distributed

   .content-box {
       display: flex;
       flex-wrap: wrap;
       align-content: space-between;
   }

space-around: The spacing on both sides of the axis is equal, and the spacing on both sides of each axis is equal, that is, the spacing between the axes is twice as large as the spacing between the axis and the border

  .content-box {
       display: flex;
       flex-wrap: wrap;
       align-content: space-around;
   }

Flex layout (project attributes)

order attribute: defines the order in which items are arranged.

The smaller the value, the higher the ranking. The default value is 0 and can be negative.

  .box:nth-child(2) {
       order:-2
   }
   .box:nth-child(3) {
       order:-3
   }
   .box:nth-child(4) {
       order:4
   }
   .box:nth-child(5) {
       order:5
   }
   .box:nth-child(6) {
       order:6
   }

flex-grow attribute: defines the magnification ratio of the item

The default value is 0, which means that if there is extra space, it will not be enlarged. Can be a decimal, occupying the remaining space proportionally.

If all items have the same flex-grow value, the remaining space is divided equally.

 .box {
       flex-grow: 5;
   }

If one item has a flex-grow of 2 and the others have a flex-grow of 1, then the remaining space occupied by that item is twice that of the others.

  .box:nth-child(3) {
       flex-grow: 8;
   }

Examples:

 .box {
       flex-grow: 0;
   }
   .box:nth-child(2) {
       flex-grow: 3;
   }
   .box:nth-child(3) {
       flex-grow: 8;
   }
   .box:nth-child(4) {
       flex-grow: 2;
   }
   .box:nth-child(5) {
       flex-grow: 7;
   }

Grid layout (container properties)

Grid layout divides the web page into grids. Different grids can be combined arbitrarily to make various layouts. Previously, this effect could only be achieved through complex CSS frameworks, but now it can be achieved using Gird layout.

The horizontal area in a container is called a row , the vertical area is called a column , and the intersection of rows and columns is called a cell .

Normally, n rows and m columns will result in n*m cells. (There are 9 cells in 3 rows and columns).

The lines that divide the grid are called "grid lines". Horizontal grid lines divide rows, and vertical grid lines divide columns.

Normally there are n + 1 horizontal grid lines for n rows and m + 1 vertical grid lines for m columns. (Three rows have four horizontal grid lines)

grid-template-columns Property, grid-template-rows Property

After the container specifies the grid layout, it is next divided into rows and columns . The grid-template-column property defines the width of each column, and the grid-template-rows property defines the height of each row.

 .content-box {
       display: grid;
       grid-template-columns: 160px 160px 160px 160px 160px;
       grid-template-rows: 160px 160px 160px 160px 160px;
   }
/*or*/
   .content-box {
       display: grid;
       grid-template-columns: 20% 20% 20% 20% 20%;
       grid-template-rows: 20% 20% 20% 20% 20%;
   }

The above code specifies a grid with five rows and five columns, with column width and row height both 160px

repeat() Function

Sometimes, writing the same value repeatedly can be cumbersome, especially when there are many grids. At this time we can use the repeat() function to simplify the repeated values.

repeat() accepts two parameters, the first is the number of repetitions and the second is the value to repeat.

 .content-box {
       display: grid;
       grid-template-columns: repeat(5, 160px);
       grid-template-rows: repeat(5, 160px);
   }
/*or*/
    .content-box {
        display: grid;
        grid-template-columns: repeat(5, 20%);
        grid-template-rows: repeat(5, 20%);
    }

It is also possible to use repeat() to repeat a pattern.

The width of the first and fourth columns is 160px, the second and fifth columns are 100px, and the third and sixth columns are 140px .

  .content-box {
       display: grid;
       grid-template-columns: repeat(2, 160px 100px 140px);
   }

auto-fill keyword

Sometimes the cell size is fixed, but the container size is indeterminate. If you want each row (or column) to accommodate as many cells as possible, you can use the auto-fill keyword to indicate automatic filling.

  .content-box {
       display: grid;
       grid-template-columns: repeat(auto-fill, 160px);
   }

fr keyword

To facilitate the expression of proportional relationships, Grid Layout provides the fr keyword (short for fraction, meaning "fraction"). If the widths of the two columns are 1fr and 2fr respectively,

It means that the latter is twice as much as the former.

  .content-box {
       display: grid;
       grid-template-columns: 1fr 1fr;
   }

fr can be used in conjunction with absolute length units, which is very convenient.

 .content-box {
       display: grid;
       grid-template-columns: 150px 1fr 2fr;
   }

The first column is 150px wide, the second is half the width of the third

auto Keyword

The auto keyword means that the browser determines the length itself.

.content-box {
       display: grid;
       grid-template-columns: 160px auto 160px;
   }

The first and third columns are 160px wide, and the middle is the maximum width, unless the cell content has a min-width set , and this value is greater than the maximum width.

minmax() Function

The minmax() function generates a length range, indicating that the length is within this range. It accepts two parameters, the minimum value and the maximum value.

  .content-box {
       display: grid;
       grid-template-columns: 1fr 1fr minmax(100px, 1fr);
   }

The minmax(100px1fr) function indicates that the column width cannot be less than 100px and cannot be greater than 1fr.

Grid line names

In the grid-template-columns attribute and the grid-template-rows attribute, you can also use brackets to specify the name of each grid line for easy reference later.

   .content-box {
       display: grid;
       grid-template-columns: [c1] 160px [c2] 160px [c3] auto [c4];
       grid-template-rows: [r1] 160px [r2] 160px [r3] auto [r4];
   }

The above code specifies a grid layout of 3 rows by 3 columns, so there are 4 vertical grid lines and 4 horizontal grid lines. The names of the eight lines are in square brackets. Grid layout allows the same line to have multiple names, such as [fifth-line row-5].

Layout Examples

The grid-template-columns property is very useful for web page layout. A two-column layout only requires one line of code.

   .content-box {
       display: grid;
       grid-template-columns: 70% 30%;
   }

The left column is set to 70% and the right column is set to 30% .

The traditional twelve-grid layout is also easy to write.

   .content-box {
       display: grid;
       grid-template-columns: repeat(12, 1fr);
   }

grid-row-gap property, grid-column-gap property

The grid-row-gap property sets the spacing between rows (row spacing), and the grid-column-gap property sets the spacing between columns (column spacing).

  .content-box {
       display: grid;
       grid-template-rows: repeat(4, 160px);
       grid-template-columns: repeat(4, 160px);
       grid-row-gap: 50px;
       grid-column-gap: 50px;
   }

grid-gap Property

The grid-gap property is a combined abbreviation of grid-column-gap and grid-row-gap.

grid-gap : <grid-row-gap> <grid-column-gap>

   .content-box {
       display: grid;
       grid-template-rows: repeat(4, 160px);
       grid-template-columns: repeat(4, 160px);
       grid-gap: 50px;
   }

If the second value of grid-gap is omitted, the browser assumes that the second value is equal to the first value. According to the latest standard, the grid- prefix of the above three property names has been deleted, grid-column-gap and grid-row-gap are written as column-gap and row-gap, and grid-gap is written as gap.

grid-template-areas Property

Grid layout allows you to specify "areas", which can consist of a single cell or multiple cells. The grid-template-areas property is used to define areas.

   .content-box {
       display: grid;
       grid-template-areas: 'abc'
                            'def'
                            'gh i';
   }

The above code first divides 9 cells, and then names them as nine areas from a to i, corresponding to these nine cells respectively. The 9 cells can also be divided into three areas a, b, and c.

   .content-box {
       display: grid;
       grid-template-areas: 'aaa'
                            'bbb'
                            'cc c';
   }

You can use the header area, the bottom is the footer area, and the middle part is the main and sidebar.

   .content-box {
       display: grid;
       grid-template-areas: "header header header"
                            "main main sidebar"
                            "footer footer footer";
   }

When we do not need to use certain areas, we use a "dot" (.) to represent them.

   .content-box {
       display: grid;
       grid-template-areas: 'a . c'
                            'd . f'
                            'g . i';
   }

grid-auto-flow Property

1. After dividing the grid, the sub-elements of the container will be automatically placed in each grid in order. The default placement order is "rows first, columns later", which means filling up the first row first and then starting to place the second row.

Second, this order is determined by the grid-auto-flow attribute, and the default value is row, "rows first, columns later". You can also set it to column, which means "columns first, rows later".

// Columns first, rows second.content-box {
       display: grid;
       grid-template-areas: 'aaa'
                            'bbb'
                            'cc c';
       grid-auto-flow: column;
   }

row dense and column dense

In addition to being set to row and column, the grid-auto-flow property can also be set to row dense and column dense. These two values ​​are mainly used to automatically set the remaining items after specifying positions for certain items.

Let item 1 and item 2 have three cells each, and then under the default grid-auto-flow, the following layout will be generated.

 .content-box {
       display: grid;
       grid-template-columns: repeat(5, 160px);
       grid-template-rows: repeat(5, 160px);
       grid-auto-flow: row;
   }
   .box:nth-child(1) {
        grid-column-start: 1;
        grid-column-end: 4;  
   }
   .box:nth-child(2) {
        grid-column-start: 1;
        grid-column-end: 4;  
   }

In the above picture, the position after item 1 is empty. This is because item 3 follows item 2 by default, so it will be placed after item 2. When we modify the settings to row dense, it means "rows first, then columns", and fill them as precisely as possible with no spaces.

.content-box {
       display: grid;
       grid-template-columns: repeat(5, auto);
       grid-template-rows: repeat(5, auto);
       grid-auto-flow: row dense; /* Avoid spaces */ 
   }
.box:nth-child(1) {
       grid-column-start: 1;
       grid-column-end: 4;  
   }
.box:nth-child(2) {
       grid-column-start: 1;
       grid-column-end: 4;  
   }

The picture above will fill up the first row first, and then the second row, so item number 3 will follow item number 1.

If you change the setting to column dense, it means "columns first, then rows", and try to fill in as many spaces as possible.

.content-box {
       display: grid;
       grid-template-columns: repeat(5, auto);
       grid-template-rows: repeat(5, auto);
       grid-auto-flow: column dense; /* Avoid spaces*/ 
   }
.box:nth-child(1) {
       grid-column-start: 1;
       grid-column-end: 4;  
   }
.box:nth-child(2) {
       grid-column-start: 1;
       grid-column-end: 4;  
   }

justify-items property, align-items property

The justify-items property sets the horizontal position of the cell content (left, center, and right), and the align-items property sets the vertical position of the cell content (top, center, and bottom).

The writing of these two attributes is exactly the same, and both can use the following attribute values.

.content-box {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

start: Align the starting edge of the cell.

The cell content is left-aligned, as shown in the following figure.

  .content-box {
       display: grid;
       grid-template-columns: repeat(5, 160px);
       grid-template-rows: repeat(5, 160px);
       justify-items: start; /* Align the starting edge of the cell */
   }
   .box {
        width: 100px;
        height: 100px;
   }

The cell content header is aligned, and the effect is as shown below.

   .content-box {
       display: grid;
       grid-template-columns: repeat(5, 160px);
       grid-template-rows: repeat(5, 160px);
       align-items: start; /* Align the cell content header*/
   }
   .box {
        width: 100px;
        height: 100px;
   }

end: Aligns to the end edge of the cell.

The end edge of the cell content is aligned, and the effect is as shown below.

   .content-box {
       display: grid;
       grid-template-columns: repeat(5, 160px);
       grid-template-rows: repeat(5, 160px);
       justify-items: end; /* Align the end edge of the cell content */
   }
   .box {
        width: 100px;
        height: 100px;
   }

center: The cell is centered inside.

stretch: stretch to fill the entire width of a single cell (default value).

place-items

The place-items property is a combined shorthand form of the align-items and justify-items properties.

place-items: <align-items> <justify-items>;

place-items: start end

If the second value is omitted, the browser considers it equal to the first value.

justify-content property, align-content property

The justify-items property is the horizontal position of the entire content area in the container (left, center, and right), and the align-items property is the vertical position of the entire content area (top, center, and bottom).

The writing of these two attributes is exactly the same, and both can use the following attribute values.

.content-box {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

The following figures all use the justify-items attribute as an example. The figures of the align-items attribute are exactly the same, except that the horizontal direction is changed to vertical.

start: Align the starting border of the container.

end: Align to the end border of the container.

center: Centered inside the container.

stretch: When the item size is not specified, it stretches to occupy the entire grid container.

space-around: There is equal space on both sides of each item. Therefore, the spacing between items is twice as large as the spacing between items and the container border.

space-between: The spacing between items is equal, and there is no spacing between items and the container border.

space-evenly: The spacing between items is equal, and the spacing between items and the container border is also the same length.

The place-content property

The place-content property is a combined shorthand form of the align-content property and the justify-content property.

place-content: <align-content> <justify-content>;

place-content: space-around space-evenly;

If you omit the second value, the browser assumes that the second value is equal to the first value.

grid-auto-columns Property, grid-auto-rows Property

1. Sometimes, the specified location of some items is outside the existing grid. For example, the grid has only 3 columns, but a certain item is specified in the 5th row. At this point, the browser will automatically generate extra grids to place the items.

2. The grid-auto-columns attribute and the grid-auto-rows attribute are used to set the column width and row height of the extra grids automatically created by the browser. They are written exactly the same as grid-template-columns and grid-template-rows. If these two attributes are not specified, the browser determines the column width and row height of the newly added grid based entirely on the size of the cell content.

 .content-box {
       display: grid;
       grid-template-columns: repeat(3, 250px);
       grid-template-rows: repeat(3, 200px);
       grid-auto-rows: 100px; /* Newly added row height */
   }
   .box:nth-child(8) {
        line-height: 80px;
        grid-row-start: 4; /*Set the fourth row*/
        grid-column-start: 2; /*Set the second column*/
    } 
	.box:nth-child(9) {
        line-height: 80px;
        grid-row-start: 5; /*Set the fifth row*/   
        grid-column-start: 3; /*Set the third column*/
    }

The above code specifies that the newly added row height is uniformly 100px (the original row height is 200px).

The grid-template property is a combined abbreviation of the three properties grid-template-columns, grid-template-rows, and grid-template-areas.

The grid property is a combined abbreviation of the six properties grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow.

From the perspective of readability and ease of writing, it is recommended not to merge the attributes, so these two attributes will not be introduced in detail here.

Gird grid layout (project properties)

grid-column-start, grid-column-end, grid-row-start, grid-row-end properties

grid-column-start property: the vertical grid line where the left border is located

grid-column-end property: the vertical grid line where the right border is located

grid-row-start property: the horizontal grid line where the top border is located

grid-row-end property: the horizontal grid line where the bottom border is located

1. The left border of item 1 is the fifth vertical grid line, and the top border is the third horizontal grid line.

.content-box {
        display: grid;
        grid-template-columns: repeat(5, 160px);
        grid-template-rows: repeat(5, 160px);
 }
 .box:nth-child(1) {
        grid-row-start: 3; /* The top border is the third horizontal grid line*/
        grid-column-start: 5; /* The left border is the fifth vertical grid line*/
 }

Except for item No. 1, other items have no specified position and are automatically laid out by the browser. At this time, their positions are determined by the grid-auto-flow attribute of the container. The default value of this attribute is row, so they are arranged "rows first, then columns". We can change the value of this property to column, row dense, and column dense respectively to see how the positions of other items change.

2. The effect of specifying the positions of four borders

.content-box {
        display: grid;
        grid-template-columns: repeat(5, 160px);
        grid-template-rows: repeat(5, 160px);
}
.box:nth-child(1) {
        grid-row-start: 2; /* The top border is the second horizontal grid line*/
        grid-row-end: 5; /* The bottom border is the fifth horizontal grid line*/
        grid-column-start: 1; /* The left border is the first vertical grid line*/
        grid-column-end: 4; /* The right border is the fourth vertical grid line*/
    }

3. In addition to specifying the grid line number, the values ​​of these four attributes can also be specified as the grid line name. (The effect is the same as above)

  .content-box {
        display: grid;
        grid-template-columns: [c1] 160px [c2] 160px [c3] 160px [c4] 160px [c5] 160px [c6];
        grid-template-rows: [r1] 160px [r2] 160px [r3] 160px [r4] 160px [r5] 160px [r6];
    }
    .box:nth-child(1) {
        grid-row-start: r2;
        grid-row-end: r5;
        grid-column-start: c1;
        grid-column-end: c4;
    }

4. The values ​​of these four attributes can also use the span keyword to indicate "span", that is, how many grids are spanned between the left and right borders (upper and lower borders).

.content-box {
        display: grid;
        grid-template-columns: repeat(5, 160px);
        grid-template-rows: repeat(5, 160px);
}
.box:nth-child(1) {
        grid-column-start: span 3; /* The left and right borders span 3 grids*/
        grid-row-start: span 2; /* The top and bottom borders span 2 grids*/
}

The effect is the same as above

.box:nth-child(1) {
        grid-column-end: span 3; /* The left and right borders span 3 grids*/
        grid-row-end: span 2; /* The top and bottom borders span 2 grids*/
}

Using these four properties, if overlapping of items occurs, the z-index property is used to specify the overlapping order of the items.

grid-column property, grid-row property

The grid-column property is a combined shorthand form of grid-column-start and grid-column-end, and the grid-row property is a combined shorthand form of grid-row-start and grid-row-end.

.box:nth-child(1) {
  grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;
}

.box:nth-child(1) {
        grid-column: 1 / 4;
        grid-row: 2 / 4;
}
/* is equivalent to */
.box:nth-child(1) {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 2;  
        grid-row-end: 4;
}

You can also use the span keyword in these two properties to indicate spanning multiple grids.

.box:nth-child(1) {
        grid-column: 1 / span 3;
        grid-row: 2 / span 3;
 } 
/* is equivalent to */
.box:nth-child(1) {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 2;  
        grid-row-end: 5;
}

The slash and the part following it can be omitted, and by default it spans a grid.

.box:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
 }

The grid-area property

The grid-area property specifies the area in which items are placed.

    .content-box {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(3, auto);
        grid-template-areas: 'abc'
                             'def'
                             'gh i';
    }
    .box:nth-child(1) {
        grid-area: e; /* Item 1 is located in area e*/
    }

The grid-area property can also be used as a combined shorthand form of grid-row-start, grid-column-start, grid-row-end, and grid-column-end to directly specify the position of the item.

.box:nth-child(1) {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

.box:nth-child(1) {
  grid-area: 3 / 3 / 4 / 4;
}

justify-self property, align-self property, place-self property

The justify-self property sets the horizontal position of the cell content (left, center, right), which is exactly the same as the justify-items property, but only applies to a single item.

The align-self attribute sets the vertical position (top, center, bottom) of the cell content, which is exactly the same as the usage of the align-items attribute and only applies to a single item.

1. Both attributes can take the following four values.

.box:nth-child(1) {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

start: Align the starting edge of the cell.

end: Aligns to the end edge of the cell.

center: The cell is centered inside.

stretch: stretch to fill the entire width of the cell (default value).

The following is an example of justify-self : start .

.box:nth-child(1) {
  justify-self: start;
}

The place-self property is a combined shorthand form of the align-self and justify-self properties.

.box:nth-child(1) {
	place-self: <align-self> <justify-self>;
}

for example:

.box:nth-child(1) {
	place-self: center center;
}

If the second value is omitted, the place-self property treats the two values ​​as equal.

refer to

Ruan Yifeng Flex Layout Tutorial: Syntax

Ruan Yifeng CSS Grid Layout Tutorial

This is the end of this article about Grid layout and Flex layout of display in CSS3. For more information about Grid layout and Flex layout of display, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!