Guide on building a 2 x 2 grid layout with NativeScript's GridLayout

The Challenge

I'm having trouble arranging images in a grid format with 2 rows and 2 columns, centering them evenly.

Despite my efforts to experiment with different layouts, I've encountered some setbacks as shown below:

https://i.sstatic.net/fy8iS.png

https://i.sstatic.net/AeyWK.png

My Desired Design

https://i.sstatic.net/V9Uz7.png

Sample XML Code

<Page loaded="pageLoaded" class="page"
    xmlns="http://www.nativescript.org/tns.xsd">
    <ActionBar class="action-bar customActionBar" >
        <NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"></NavigationButton>
        <ActionItem icon="res://navigation/menu" 
            android:visibility="collapsed" 
            tap="onDrawerButtonTap"
            ios.position="left"></ActionItem>
        <Label class="action-bar-title" text="Signup"></Label>
    </ActionBar>
    <DockLayout width="100%" height="100%" backgroundColor="lightgray" class="page-gradient"
        stretchLastChild="false">
        <Button class="submitButton h2 border" text="Next" height="60" dock="bottom"
            tap="onSignupButtonTap" returnKeyType="next"/>
        <StackLayout dock="top" width="100%" height="75" >
            <Image class="" src="~/images/signup/step-1-on.png" stretch="fill" />
            <Image style="margin-top: 15"  src="~/images/signup/progress.png" stretch="fill" />
        </StackLayout>
          <WrapLayout orientation="horizontal" width="210" height="210" backgroundColor="lightgray">
    <Label text="Label 1" width="70" height="70" backgroundColor="red"/>
    <Label text="Label 2" width="70" height="70" backgroundColor="green"/>
    <Label text="Label 3" width="70" height="70" backgroundColor="blue"/>
    <Label text="Label 4" width="70" height="70" backgroundColor="yellow"/>
  </WrapLayout>
    </DockLayout>
</Page>

If anyone can assist me with achieving this layout, I would greatly appreciate it. It seems simple, but I'm struggling with it.

Thank you in advance.

Answer №1

Check out the playground I created here.

GridLayout reigns supreme.

<GridLayout columns="*, *" rows="*, *" width="230" height="230"
        backgroundColor="lightgray">
        <Label text="Label 1" row="0" col="0" backgroundColor="red" />
        <Label text="Label 2" row="0" col="1" backgroundColor="green" />
        <Label text="Label 3" row="1" col="0" backgroundColor="blue" />
        <Label text="Label 4" row="1" col="1" backgroundColor="yellow" />
        <Label text="Label 5" row="1" col="2" backgroundColor="orange" />

    </GridLayout>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The customized styling for Material Angular does not seem to properly apply to <md-card> elements within ui-views

I am trying to achieve a specific effect on the ui-views <md-card id="sidebar" flex="20" class="sche-card" layout-padding="true"> <div ui-view="card" autoscroll="false"></div> </md-card> However, I am facing an issue where the car ...

Display a different image while another image is in the process of loading

I am currently facing an issue with a div that has a background image set up as follows: <div class="carousel-image" style="background: url(img/background.gif) no-repeat center center;"> </div> Upon loading my webpage, there is a brief ...

What is the best way to center a div vertically within a bootstrap 5 carousel across all screen sizes?

Looking to center the text div within a Bootstrap 5 carousel both vertically on large screens and small (mobile) screens. To view the site, visit... Below is the HTML for the div. The targeted div has the CSS class #hero .carousel-container { display ...

Font appearance varies between Chrome and Firefox browsers

I'm relatively new to the world of web development and have encountered an issue with a menu I created. The buttons in the menu have varying widths depending on the browser being used – Firefox or Chrome. In Firefox, the last button in the menu lin ...

HTML and CSS: Understanding DataTables Header Padding

http://jsfiddle.net/d1zqsayh/ (Strange issue not appearing on jsfiddle, very odd) When I modify the padding in the .css file at line 41 from 10px 18px; to 10px 17px;, I notice a difference in how the content is displayed on my screen in both Google Chrome ...

What is the best way to ensure that these social icons are perfectly centered on the page across all web browsers?

Visit my website here: foxweb.marist.edu/users/kf79g/contact.php I'm stuck on the final step needed to deploy my website and finish it. The issue I'm facing is with the social icons when viewed on medium and small screens. I want them to be cent ...

Half-extended Bootstrap 4 container reaching the edge of the page

I'm looking to create a layout with a .container that consists of two distinct halves. The left half should function as a standard .col-6, while the right half should extend all the way to the edge of the screen, similar to a .col-6 within a .contain ...

Is there a way to hide the borders between cells within these divs?

I am working on an application screen using Vue.js and facing an issue with the divisions between cells. I want to hide these divisions so that the lines of the items appear continuous. I attempted to modify the classes of the columns to "col-md" and "col ...

Hiding an HTML image element by setting its display to none will prevent it from being visible if later changed to block display

I am currently developing a web-based game that can be played on both desktop computers and mobile devices. However, for the optimal experience on mobile devices, players need to rotate their device to landscape mode. To prompt users to rotate their devic ...

Positioning a fixed element in relation to a specific DIV: Tips and Tricks

An issue I am facing is with a DIV element that needs to always be positioned in the upper right corner of another DIV. Initially, using absolute positioning seems like the solution, but when the parent DIV has a scroll function, the first DIV disappears f ...

Adjusting the height of the navigation bar in BootStrap

I'm having trouble resizing the height of the navbar-default in this Bootstrap sample. It seems to be too big for my needs. Are there any Bootstrap classes I can use to adjust the height? For example: <form class="navbar-form navbar-left" role="s ...

What is the process for incorporating themes into CSS?

At the moment, I have set up variables to manage colors for both light and dark themes (such as --light-background-color, --dark-background-color). Handling two themes is manageable with this approach, but it feels a bit labor-intensive. If more themes wer ...

jQuery automatic slider for seamless transitions

I am in need of assistance with the coding for a website I'm currently constructing at www.diveintodesign.co.uk/ChrisMcCrone/index.html The coding being used is sourced from http://jquery.malsup.com/cycle/ The central large image functions as a slid ...

"Using Bootstrap's toast feature repositions every element on the

I am working on a website project and encountering an issue with a bootstrap toast. The toast currently appears in the top right corner, but I would like it to display above the carousel without affecting the layout. Instead, when the toast appears, it shi ...

What is the best way to position an image in the center over a video using HTML and CSS?

I am currently developing a website with a background video and I want to overlay a company logo on top of it while keeping it centered. My coding language of choice for this project is using HTML and CSS. Here's the HTML code snippet I have for this ...

Having trouble with SCSS styles not being applied after refactoring to SCSS modules?

Currently, I am in the process of restructuring an application to ensure that component styles are separated from global styles using CSS modules. However, I have come across an issue where the styles are not being applied correctly. The original code sni ...

Creating animated effects through Javascript and CSS triggered by user events

As a beginner in javascript and CSS, I am experimenting with creating a simple animation that adjusts the transparency of an image when triggered by an event. However, I am facing an issue where the animation only works every other time the function is cal ...

Eliminate unnecessary gaps by using HTML to position images side by side without vertical space

I am just starting out with html and css coding and recently I built my first website using wordpress. On one of the pages in wordpress, I wanted to display images next to each other with a small space between them. I achieved this successfully, but unfor ...

What seems to be the issue with my 2-column design layout?

When I try to arrange my webpage with a 2 column layout, adding an image messes up the footer. Without the image, the footer looks correct. <!DOCTYPE html> <html lang="en"> <head> <title>SuperRestraunt</title> ...

The full-width header is generating a horizontal scrollbar

Why am I seeing horizontal scroll bars on Safari and Chrome when the header width is set to 100%? Here is the code snippet: window.onscroll = function() { scrollFunction(); }; function scrollFunction() { if (document.body.scrollTop > 400 || doc ...