We can use media queries and the grid-template-areas CSS attribute to set the grid-area size and positions. Below we see the visual layout right next to the CSS.Ī common use case is to move, scale, or reposition elements on different screen sizes. Using the grid-template-areas CSS rule, we can define our grid-areas and where what cells they belong to.
Vaadin responsive layout code#
The CSS code almost looks identical to our visual image. We could even tell the element to be positioned in the "footer" grid-area and you would see your element at the bottom! This is handy because it means we can change the ordering and position and size of our HTML elements with just a single CSS rule! By having this, we can simply use CSS tell the element to be placed in the "header" grid-area. The grid-area defines and names a portion of the grid. This is because our header grid-area takes up both of those cells. Notice how there are two cells that are labeled "header". This name is how we can refer to sections of the grid. The text inside each grid cell is the "grid-area" name. Below you can see the grid traced by the thick black lines. We need to draw a grid that will encapsulate all of the sections of the UI. For this example, lets focus on small, medium, and large size screens.
Vaadin responsive layout how to#
Next, we need to figure out how to display these sections on different screen sizes. Anyone looking at this could easily see what the different parts of the UI are. Now we can lay out our basic elements in the DOM. We can start out by identifying the main sections of the UI. We have the mock-ups for small, medium, and large screens. Let's say we need to build the UI for a web email application. In order to demonstrate, let's walk through an example. This can be especially useful when elements must be repositioned based on the display/device size.
With CSS grid, we can simply use CSS to tell the grid where elements should be positioned.
Normally if we wanted to reposition an element we would use Javascript to manipulate the DOM structure, removing and re-injecting the target element wherever we want it. Building responsive layouts with CSS grid allows us to easily define a grid, element positions and sizes within the grid for each breakpoint we define. Generally, this means the size, position, and visibility of each section within the UI is dependent on the display size. Responsive design is used to create good user interfaces across all display sizes and devices. A simple responsive layout example without any tricks nor manipulating DOM with JavaScript.
0 kommentar(er)
