CSS: Layout Beyond Grid

Css

Original Author:Molly E. Holzschlag
Original:thinking Outside the Grid
Chinese translation:54player.com - Nobita (2006-06-01)

"Aerials, in the sky, as you lose small mind your free Your Life"- System of a Down (1)

November a late night, from the sky overlooking my hometown, Arizona, State's Tucson city, its rigorous grid layout left me a deep image. Tucson is one of the many planned cities in the United States, from the sky, it is easy to find Tucson city designers to the precise layout of the successful application of the plan (Figure 1).

Figure 1

I came back to Tucson from London, by contrast, London did not follow the grid layout at all. It is designed with spirals, rounded, trapezoidal, and appears to be more naturally produced (Fig. 2).

Figure 2

I've been thinking about this for a long time, because by overlooking the layout of the city, I've got to think of the grid in web design. With existing techniques and techniques, we can create a grid based design, or we can completely break the grid. The latter will undoubtedly enhance our web design: The challenge before us is how to get rid of narrow ideas beyond grid layout.

sense of direction and city

If we extend urban planning to web design, there will be a lot of interesting tracks. Grid based layouts are especially useful for web sites that are guided, easy to navigate, and true to visual expressions. The grid is good for designers to decorate, and viewers are easy to access (Figure 3).

Figure 3:Ryan Brill

On the upside, grid Tucson is certainly easier to get closer to, and you just need a basic sense of direction and a street map. According to the grid, residents tell others where their home is: "I'm on Campbell Avenue and the southeast corner of Prince Road." "Roads and traffic are from north to south or west to east, so cities are easier to navigate," he said.

On the other hand, the design of Tucson is under the premise of the limited development of the city, once the development of the city exceeds this premise, there will be countless problems in maintaining its navigation and usability. In addition, the superiority of the Tucson grid to the community and the neighbourhood has not been highlighted. As a result, many Tucson residents feel that the city lacks an activity center and a unique community. And when this division does exist, it is easy to find their destination, but also easily lost in a certain place.

London is a far cry from Tucson, and it is like a maze. I find that many Londoners carry a guide to London to keep them from getting lost! The city's transportation system is more challenging, the most expressive of which is taxi drivers, who must pass a test to prove that they have the " ability " to drive this traditional black taxi. The city's organic development does not enhance its navigable nature.

But in London, the stunning siege and fun-filled zoning is present in all parts of the city. It can be said that there are more than one or two cultural centers or community centers, but many. Reduces navigation, but increases selectivity, and people have a higher incentive to participate in urban development.

When looking at these unstructured, natural designs, how can one find direction on these winding, circuitous roads? On the other hand, in web design and development can break the idea of such a routine. But so far, there is still some reservations. In Figure 4, we see a layout that completely breaks down traditional grid confinement, while designers adopt a custom layout while maintaining ease of use.

Figure 4:AIGA Los Angeles

A wonderful way of writing

For a code-centric rather than a design-capable person, code and design are tightly combined to make me more obsessed. I firmly believe that the design idea of a long time in the grid is the hangover left by the table layout (Figure 5). Coupled with the slowly beginning of the understanding of CSS layout, we can easily find the reason for this layout habit.

Figure 5:k10k

The table layout seems to be designed for the grid, and the markup itself can reproduce the exact grid, leaving us with the rest of the work simply by filling the squares with pictures, text, and other interface elements to complete our design (Figure 6). If we need to create a unstructured or natural design with complex visual performance, we need to use a lot of pictures and tags, which can make the document bloated and complicated.

Figure 6:weightshift

Grid layout Based on table has some advantages, but, for example, the design of the city, the advantage will become a weakness. Grid layout Based on tables ensures that elements in a cell are arranged in the way we think. Keep all columns the same size? We don't even have to think about it, this is the nature of the form. Let the cells create some space between them? Nor do we need to think about it. Of course, what if we don't want this size-uniform lattice? There is only one painful answer: No.

CSS has changed all this, and that's why we've been working on web design experience. After years of using tables, we slowly began to have a unique view of CSS layouts--for discrete, semantic elements, the visual model of CSS is more likely to break the grid layout. Not so, CSS brings us benefits, but also brings us a problem. A column that can be scaled like a table is one of them, as well as a blank space between each cell.

The CSS visual model is made up of box models and lines. Grids are also made up of them, aren't they? Of course, if you do that, the answer is yes. This is the most basic difference. CSS allows us to use a box and multiple boxes at our whim, independent of its perimeter (Figure 7).

Figure 7

We can use the Position property or float a box directly, and we can add a small picture of the space as the background. With some tricks, we can make these boxes look different visually. This includes grids, but it can also efficiently create a non grid design, which you can see in Dave Shea's blood Lust , a design for CSS Zen Garden (Figure 8).

Figure 8:CSS Zen garden:blood Lust

Figure 9 shows the box used to make up the unstructured grid design of the blood lust, and once again shows us a design that uses CSS boxes to create unstructured grids that are linked together and maintain a certain degree of independence from each other.

Figure 9

As long as we know what we can do with or with a box, we can use this ability to break the long-standing shackles of the grid. Look at the following design (Fig. 10), which is completely unstructured, even a completely natural manifestation.

Figure:kutztown university:communication Design Department

and a box layout based on CSS:

Figure 11

Not only can reduce the use of tags, but also obviously let designers more skilled use of CSS layout. However, the screen to see the rich and colorful, but also shows the non-grid design usability and attractions.

An infinite expanse of space

We now choose this beautiful, very challenging modern layout. Based on CSS, we can create easy to manage, compact, diverse design, even the traditional grid layout. But we can also disarm the grid, or abandon it altogether.

This is a vast world for the web designers of today. But the remaining challenge is to think more, not to go backwards to the design patterns of the past because of their similarity.

This challenge has been extremely severe in the years that we have been jumping out of the table layout idea. Many experienced web designers have changed the way we think and changed the design patterns we've been using for so long. It's easy for some people, but it's hard for most people to go beyond it. Part of the answer is to teach yourself to understand and master the way CSS and browsers behave. But part of the answer is the active abandonment of practice.

There was a newborn child in the block, and her name was "I've never used a form at work." "For her, the old method was unfamiliar and parochial. It is in her generation that we are likely to see more novel designs that have never been seen in the last ten years.

The web is maturing, our efforts are slowly changing it, and our opportunities for innovation are more pronounced than ever before. Not only is it limited to urban design, we can also create unique designs and make them work properly. As a driving force, whether experienced veteran or young people will be inspired by this, a very encouraging idea, that is, our internet is changing rapidly. And I believe that you will feel that this is a very good thing.